Использование функционального компонента внутри метода компонента класса

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня нет синтаксической ошибки, и код компилируется нормально, но вызываемый функциональный компонент «SuccessfulModal» никогда не отображается.

мой функциональный компонент

 import React from 'react'

export default function SuccessfulModal() {

const hello = () => {
    return alert("Welcome :)")
}

  return (
    <div>
        {hello()}
    </div>
  )
}

 

мой компонент класса

 import SuccessfulModal from "../successfulModal/SuccessfulModal"

 export default class ConfirmationModal extends Component {
  
  state = {
    open: false,
    revisionId: ""
    }

 saveOnClick = () => {
    axios.put('http://localhost:8080/lagbevakning/revision/revisionsubscription', {
      revisionId: 36,
    })
    .then((response) => {
      console.log(response) /* Gets called */
      this.setState({open: false})  /* Gets called */
      return <SuccessfulModal/>  /* Never gets called */
    })

  submitorCancelButton = () => (
       <Button className="saveButton" onClick={this.saveOnClick}>  Save   </Button>
  )

 

Метод визуализации

   render() {
       return (
         <div>
                                  {this.submitorCancelButton()}
         </div>
    )
  }
 

Комментарии:

1. Это не так, как работает React…… Если у вас нет render метода в вашем классе, ничто никогда не будет отображаться..

2. Пожалуйста, покажите метод рендеринга для ConfirmationModal (если он существует) — невозможно понять, почему он отображается неправильно, если вы не показываете нам, что вы визуализируете!

3. мои извинения, пожалуйста, посмотрите по-новому.

Ответ №1:

То, что вы возвращаете из функции, указанной then в вашем запросе axios, не используется при рендеринге компонента.

Вместо этого вы можете изменить часть состояния и использовать ее в методе визуализации, чтобы выяснить, следует ли вам отображать ваш SuccessfulModal компонент или нет.

Пример

 const { useEffect } = React;

function SuccessfulModal() {
  const hello = () => {
    alert("Welcome :)");
  };

  useEffect(hello, []);

  return <div>SuccessfulModal</div>;
}

class ConfirmationModal extends React.Component {
  state = {
    open: false
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({ open: true });
    }, 1000);
  }

  render() {
    return this.state.open ? <SuccessfulModal /> : null;
  }
}

ReactDOM.render(<ConfirmationModal />, document.getElementById("root")); 
 <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div> 

Ответ №2:

Проблема в том, что вы просто возвращаете его в метод;

вместо этого попробуйте добавить к состоянию showModal значение false, а затем, когда запросы и просто установите showModal: true , и в вашем методе рендеринга добавьте, что если showModal true, то render `:

 state = {
  open: false,
  revisionId: "",
  showModal: false
}

saveOnClick = () => {
  axios.put('http://localhost:8080/lagbevakning/revision/revisionsubscription', {
    revisionId: 36,
  })
    .then((response) => {
      console.log(response) /* Gets called */
      this.setState({
        open: false,
        showModal: true
      })  /* Gets called */
    })

  render(){
    const { showModal } = this.state;

    return (
      { showModal amp;amp; <SuccessfulModal />}
    )
}```
 

Ответ №3:

Я думаю, проблема в том, что вы возвращаете элемент, а не визуализируете его. Он должен отображаться в DOM, поскольку у него нет метода render. В вашем случае, если бы вам нужно было выполнить рендеринг для этого, вы бы сделали

Сделайте npm install react-dom , а затем, если вы используете ES6, вы можете сделать:

 import ReactDOM from 'react-dom';
 

или, если вы используете ES5, вы можете просто сделать:

 var ReactDOM = require('react-dom')
 

Я бы изменил последнюю строку на

 ReactDOM.render(<SuccessfulModal/>, document.getElementById('root'); 
 

Теперь элемент может отображаться (при условии, что root является основным подразделением вашего приложения).