javascript - 如何在 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 用于更复杂的情况。

谢谢

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>;
}

注意语法 someBoolean && "stuff":如果错误地将 someBoolean 设置为 0 或 NaN，该数字将呈现给 DOM。因此，如果“ bool 值”可能是一个虚假数字，使用(someBoolean ? "stuff": null)会更安全。