是否可以在React render函数中使用if ... else ...语句？

大佬教程收集整理的这篇文章主要介绍了是否可以在React render函数中使用if ... else ...语句？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决是否可以在React render函数中使用if ... else ...语句？？

不完全一样，但是有解决方法。在React的文档中有一节关于条件渲染，您应该看一下。这是使用内联if-else可以做什么的示例。

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <logoutbutton onClick={this.handlelogoutClick} />
      ) : (
        <Loginbutton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

您也可以在render函数中处理它，但是要在返回Jsx之前。

if (isLoggedIn) {
  button = <logoutbutton onClick={this.handlelogoutClick} />;
} else {
  button = <Loginbutton onClick={this.handleLoginClick} />;
}

return (
  <div>
    <GreeTing isLoggedIn={isLoggedIn} />
    {Button}
  </div>
);

还值得一提的是ZekeDroID在评论中提到的内容。如果您只是检查条件而又不想呈现不符合要求的特定代码，则可以使用&& operator。

  return (
    <div>
      <h1>Hello!</h1>
      {unreadmessages.length > 0 &&
        <h2>
          You have {unreadmessages.length} unread messages.
        </h2>
      }
    </div>
  );

解决方法

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // note: code does not work here
            if (this.props.hasImagE) <MyImage />
            else <OtherElement/>
        </div>
    )
}