Реактивный условный рендеринг компонента внутри функции не работает - PullRequest
Новая
       4

Реактивный условный рендеринг компонента внутри функции не работает

1 голос
/ 06 февраля 2020

Я использую Codesandbox для работы над изучением React. Я пытаюсь условно визуализировать функциональный компонент React внутри функции (внутри компонента на основе классов), который срабатывает при нажатии кнопки.

Вот ссылка на Codesandbox: https://codesandbox.io/embed/laughing-butterfly-mtjrq?fontsize=14&hidenavigation=1&theme=dark

Проблема, с которой я столкнулся, заключается в том, что без импорта и обработки ошибок и приемов пищи в приложении. js Я никогда не могу получить ни один компонент для визуализации из компонента бронирования. В функции здесь: 

   if (!this.state.name) {
     return (
       <div>
         <Error />
       </div>
     );
   }
    else {
      return <Meals name={this.state.name} date={this.state.date} />;
    }
 }

Я должен отображать ошибку, которая должна отображаться на экране при нажатии, если имя не введено, но ничего не происходит, и я в тупике.

Есть ли что-нибудь очевидное, что помешало бы мне увидеть загрузку компонента Error по клику?

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 06 февраля 2020

Все, что отображается на экране, получено методом render. Вы не можете вернуть JSX из любой подобной функции. Вы можете сделать что-то вроде этого: 

class Bookings extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      date: "",
      display: false
    };
  }

  guestInfoHandler = event => {
    console.log(this.state, "what is the state");
    this.setState({ name: event.target.value });
  };

  dateInfoHandler = event => {
    this.setState({ date: event.target.value });
  };

  showMeals = () => {
    this.setState({ display: true });
  };

  render() {
    return (
     <>
      <div style={{ display: "inline-block" }}>
        <form
          className="theForm"
          style={{
            height: "50px",
            width: "100px",
            borderColor: "black",
            borderWidth: "1px"
          }}
        >
          <label className="theLabel">
            Name:
            <input
              className="theInput"
              type="text"
              placeholder="guest name here"
              onChange={this.guestInfoHandler}
              value={this.state.value}
            />
          </label>
        </form>
        <form>
          <label>
            Date:
            <input
              type="text"
              placeholder="date here"
              onChange={this.dateInfoHandler}
              value={this.state.value}
            />
          </label>
        </form>
        <button onClick={() => this.showMeals()}>Click</button>
      </div>
      { display && name ? (
          <Meals name={name} date={name} />
          ) : (
             <Error />
          )}
     </>
    );
  }
}

export default Bookings;

Надеюсь, это работает для вас.

0 голосов
/ 06 февраля 2020 
  render() {
      const name = this.state.name;
      return (
        <div>
          {name ? (
          <Meals name={name} date={name} />
          ) : (
             <Error />
          )}
        </div>
      );
    }

nb: использовать метод рендеринга только в компоненте класса.

есть условные рендеринг различных типов, упомянутый в

https://reactjs.org/docs/conditional-rendering.html#

...