Javascript 函数内组件的反应条件呈现不工作

我正在使用Codesandbox学习React。我试图有条件地呈现函数中的函数React组件（在基于类的组件中），当单击按钮时触发

以下是指向Codesandbox的链接：

我的问题是，如果不在App.js中导入并呈现错误和膳食，我永远无法从Booking组件中获取任何一个组件来呈现。在此处的函数中：

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

if（！this.state.name）{
返回(
);
}
否则{
返回；
}
}

我应该是渲染错误，然后应该显示在屏幕上点击，如果没有名字输入，但什么也没有发生，我被难住了

是否有任何明显的东西会阻止我在单击时看到错误组件的加载

提前谢谢你

render（）{
  render() {
      const name = this.state.name;
      return (
        <div>
          {name ? (
          <Meals name={name} date={name} />
          ) : (
             <Error />
          )}
        </div>
      );
    }

const name=this.state.name；
返回(
{名字(
) : (
)}
);
}

注意：仅在类组件中使用render方法

中提到了各种类型的条件呈现

---

屏幕上显示的所有内容都来自

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;

课程预订扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
姓名：“，
日期：“，
显示：假
};
}
guestInfoHandler=事件=>{
log（this.state，“状态是什么”）；
this.setState（{name:event.target.value}）；
};
dateInfoHandler=event=>{
this.setState（{date:event.target.value}）；
};
showFeeds=（）=>{
this.setState（{display:true}）；
};
render（）{
返回(
姓名：
日期：
this.showFinds（）}>单击
{显示名称（&N）(
) : (
)}
);
}
}
导出默认预订；

---

希望这对您有用。

谢谢，这确实有用！这非常有用，而且更有意义。我不认为在函数中添加JSX是正确的，但我发现了一些关于条件呈现的文章，并以此为例。