如何在reactjs JSX中嵌套if语句？

Question

我想知道是否有可能做嵌套reactjs jsx呢？

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

我在寻找

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并调用该函数的解决方案。这两个答案都确实有效。我想我可以使用内联解决方案，如果它用于简单的render和renderContent用于更复杂的情况。

谢谢

Answer 1

您需要将标题和正文包装在容器中。那可能是一个div。如果改用 列表 ，则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 && component如果只需要三元组的真实部分，则可以使用。

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">{ renderContent() }</div>;
}

请注意语法someBoolean && "stuff"：如果错误地将其someBoolean设置为0或NaN，则将Number呈现给DOM。因此，如果“布尔值”可能是
伪造的数字 ，则使用会更安全(someBoolean ? "stuff" : null)。