如何在ReactJS JSX中做一个嵌套的如果其他语句？

Question

我想知道在ReactJSJSX中是否可以嵌套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并调用该函数的解决方案。不过，这两个答案都有效。我想我可以使用内联解决方案，如果它用于简单的渲染和更复杂的情况下的渲染内容。

谢谢你

Answer 1

您可以检查多个条件来相应地呈现组件，如下所示：

  this.state.route === 'projects'
  ? 
  <div> <Navigation onRouteChange={this.onRouteChange}/> Projects</div>
  :
  this.state.route === 'about'
  ?
  <div> <Navigation onRouteChange={this.onRouteChange}/> About</div>
  :
  this.state.route === 'contact'
  ?
  <div> <Navigation onRouteChange={this.onRouteChange}/> Contact</div>
  :
  <p> default </p>

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>

Answer 3

您需要将标题和正文包装在一个容器中。这可能是一个div。如果改用list，则dom中的元素将减少一个。

{ this.state.loadingPage
  ? <span className="sr-only">Loading... Registered Devices</span>
  : [
      (this.state.someBoolean
        ? <div key='0'>some title</div>
        : null
      ),
      <div key='1'>body</div>
    ]
}

我建议不要嵌套三元语句，因为它很难阅读。有时，“早回来”比使用三元表更优雅。此外，您还可以使用isBool

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

  return [
    (this.state.someBoolean && <div key='0'>some title</div>),
    <div key='1'>body</div>
  ];
}

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

语法someBoolean的警告