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

发布于05月19日

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

我try 过各种不同的方法，但我无法让它发挥作用.

我在找

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

Update

我最终 Select 了解决方案，将其移动到renderContent并调用该函数.不过，这两个答案都有效.我想我可以使用内联解决方案，如果它用于简单的渲染，而对于更复杂的情况，则使用renderContent.

非常感谢.

推荐答案

你需要把标题和正文包装在一个容器里.这可能是一个div.如果改用fragment，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.因此，如果"布尔值"可能是falsy Number，那么使用(someBoolean ? "stuff" : null)更安全.