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

Question

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

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

我在找

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

您需要将标题和正文包装在一个容器中。 那可能是一个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">{ this.renderContent() }</div>;
}

注意语法someBoolean && "stuff" ：如果错误地将someBoolean设置为0或NaN ，则该 Number 将呈现给 DOM。 因此，如果 "boolean" 可能是一个虚假的 Number ，那么使用(someBoolean ? "stuff" : null)更安全。

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

您可以嵌套尽可能多的语句。 请遵循此代码，假设this.state.firstTestValue 、 this.state.someTestValue和this.state.thirdValueTest是来自该州的测试值。

{this.state.firstTestValue
    ? <div >First Title</div>
    : [
        this.state.someTestValue
            ? <div>Second Title</div>
            : [
                this.state.thirdValueTest 
                ? <div>Some Third Title</div> 
                : <div>Last Title</div>
            ]
    ]
}

Answer 4

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

  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 5

您的替代代码不是有效的 JavaScript/JSX 表达式：

(
  this.state.someBoolean ?
  (<div>some title</div>):(<div>some other title</div>)
  <div>body</div>
)

让我们将其简化为

(
  true ? 42 : 21
  3
)

这会引发错误

未捕获的语法错误：意外的数字（...）

你不能只有两个相邻的表达式。

相反，您必须从条件运算符的 false 分支返回单个值。 你可以简单地把它放在另一个 JSX 元素中：

(
  <div>
    {this.state.someBoolean ? (<div>some title</div>) : (<div>some other title</div>)}
    <div>body</div>
  </div>
)

如果您只想在显示“some other title”时显示“body”，则需要将<div>body</div>到条件运算符的 false 分支中：

(
  this.state.someBoolean ?
    (<div>some title</div>) :
    (<div>
       <div>some other title</div>
       <div>body</div>
    </div>)
)

或者也许你想要

(
  <div>
    {this.state.someBoolean ? (<div>some title</div>) : null}
    <div>body</body>
  </div>
)

Answer 6

正如另一个答案所暗示的那样，有多种方法可以在反应中进行嵌套 if else。 使用哪一种取决于情况和偏好。

在我看来，为了获得最佳代码可读性，在这种情况下最好将 else 的内容移动到单独的函数中：

renderContent() {
     return (
         <div>
             { this.otherCondition && <div>title</div> }
             <div>body</div>
         </div>
     );
}

render() {
    return (
        <div>
            { ... }
            {
                this.state.loadingPage ?
                    <div>loading page</div>
                    :
                    this.renderContent()
            }
            { ... }
        </div>
    )
}

或者如果它足够简单（如果没有其他元素被渲染），我会选择：

render() {
    if (this.state.loadingPage) {
        return (
            <div>loading page</div>
        )
    }
    return (
        <div>
            { this.otherCondition && <div>title</div> }
            <div>body</div>
        </div>
    );
}

这是一篇关于 React 中的条件渲染的文章，如果您对此主题的更多详细信息感兴趣，请查看它。