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

Question

基本上，我有一个 react 组件，它的 render() 函数体如下：（这是我的理想，这意味着它目前不起作用）

 render(){
    return (
        <div>
            <Element1/>
            <Element2/>

            // note: logic only, code does not work here
            if (this.props.hasImage) <ElementWithImage/>
            else <ElementWithoutImage/>

        </div>
    )
}

原文由 Xin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不完全一样，但有一些解决方法。 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>
  );

原文由 Alexandre Angelim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

实际上有一种方法可以完全按照 OP 的要求进行操作。像这样渲染和调用匿名函数：

 render () {
  return (
    <div>
      {(() => {
        if (someCase) {
          return (
            <div>someCase</div>
          )
        } else if (otherCase) {
          return (
            <div>otherCase</div>
          )
        } else {
          return (
            <div>catch all</div>
          )
        }
      })()}
    </div>
  )
}

原文由 manncito 发布，翻译遵循 CC BY-SA 4.0 许可协议