如何在 ReactJS JSX 中执行嵌套的 if else 语句？

Question

我想知道是否可以在 ReactJS JSX 中嵌套 if else if？

我尝试了各种不同的方法，但无法使其正常工作。

我在寻找

if (x) {
  loading screen
} else {
  if (y) {
    possible title if we need it
  }
  main
}

我试过这个但我无法让它渲染。我尝试了各种方法。一旦我添加嵌套的 if，它总是会中断。

 {
  this.state.loadingPage ? (
    <div>loading page</div>
  ) : (
    <div>
      this.otherCondition && <div>title</div>
      <div>body</div>
    </div>
  );
}

更新

我最终选择了将其移动到 renderContent 并调用该函数的解决方案。这两个答案确实有效。我想我可能会使用内联解决方案，如果它用于简单的渲染，而 renderContent 用于更复杂的情况。

谢谢

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

Answer 1

您需要将您的标题和正文包装在一个容器中。那可能是一个股利。如果您改用 片段，则 dom 中的元素会少一个。

 { this.state.loadingPage
  ? <span className="sr-only">Loading... Registered Devices</span>
  : <>
      {this.state.someBoolean
        ? <div>some title</div>
        : null
      }
      <div>body</div>
    </>
}

我建议不要嵌套三元语句，因为它很难阅读。有时“早点返回”比使用三元组更优雅。此外，如果您只想要三元的真实部分，则可以使用 isBool && component 。

 renderContent() {
  if (this.state.loadingPage) {
    return <span className="sr-only">Loading... Registered Devices</span>;
  }

  return (
    <>
      {this.state.someBoolean && <div>some title</div>}
      <div>body</div>
    </>
  );
}

render() {
  return <div className="outer-wrapper">{ this.renderContent() }</div>;
}

Caveat to the syntax someBoolean && "stuff" : if by mistake, someBoolean is set to 0 or NaN , that Number will be rendered to the DOM .因此，如果“布尔值”可能是一个虚假的 Number ，那么使用 (someBoolean ? "stuff" : null) 会更安全。

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

Answer 2

您可以简单地调用内联表达式，而不是像通常建议的那样嵌套三元运算符或创建一个不会在其他任何地方重用的单独函数：

 <div className="some-container">
{
   (() => {
       if (conditionOne)
          return <span>One</span>
       if (conditionTwo)
          return <span>Two</span>
       else (conditionOne)
          return <span>Three</span>
   })()
}
</div>

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