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

【问题标题】：How to do a nested if else statement in ReactJS JSX?如何在 ReactJS JSX 中执行嵌套的 if else 语句？
【发布时间】：2016-09-15 16:17:10
【问题描述】：

我想知道如果在 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 用于更复杂的情况。

谢谢

【问题讨论】：

仅供参考 if/else 构造不是“循环”
(<div>body</div>) 部分似乎不属于任何东西。那是一个错误。否则你所拥有的似乎很好。
@FelixKling 如果我以
body
的身份进行操作，它将无法正常工作。关键是我想在 else 中有一些始终显示的数据和另一个 if 作为标题。
我明白，但 foo ? bar : baz abc 不是有效的 JavaScript。那你想要<div>{this.state.someBoolean ? ... : ...}<div>body</div></div>。
你不能有两个 表达式 一个接一个：4 5 是无效的。这对语句来说不是问题。

【解决方案1】：

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

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

让我们把它简化为

(
  true ? 42 : 21
  3
)

这会引发错误

Uncaught SyntaxError: Unexpected number(…)

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

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

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

如果你想在显示“其他一些标题”时只显示“正文”，你需要将<div>body</div>移动到条件运算符的假分支中：

(
  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>
)

【讨论】：

问题是我只希望正文出现在其他标题中。使用“body”可能不是最佳选择。我可以重写
那么您的原始代码就更没有意义了，并且与您的if...else 示例不匹配。那么您想要的是this.state.someBoolean ? (<div>some title</div>):(<div><div>some other title</div><div>body</div></div>)。
问题是我只想在另一个条件为真时显示标题。正文将像您在 else 部分的第二个示例中一样显示，但我需要 ANOTHER 以标题为条件。该页面显示加载页面或带有或不带标题的主页
我用你的例子和额外的条件更新了我的问题
更新了我的答案。请注意，所有示例仅显示外部条件的错误分支，因为这是唯一不正确的事情。如果这仍然不是你想要的，我真的不知道你在说什么。

【解决方案2】：

您需要将标题和正文包装在一个容器中。那可能是一个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 && 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，则该数字将被呈现给DOM。因此，如果“布尔值”可能是 falsy Number，则使用 (someBoolean ? "stuff" : null) 会更安全。

【讨论】：

我最终将您的第二个解决方案与 renderContent 一起使用，因为我相信它更易于阅读和使用。谢谢
当使用 [] 进行渲染时，每个子组件的 react throw 警告应该有一个 key prop。

【解决方案3】：

您可以简单地调用内联表达式，而不是像通常建议的那样嵌套三元运算符或创建一个不会在其他任何地方重用的单独函数：

<div className="some-container">
{
   (() => {
       if (conditionOne)
          return <span>One</span>
       if (conditionTwo)
          return <span>Two</span>
       else (conditionOne)
          return <span>Three</span>
   })()
}
</div>

【讨论】：

“最漂亮”的解决方案在这里，但从性能的角度来看，这会增加一些开销，因为每次调用渲染时都会创建一个 IIFE。
如果您需要条件渲染，它是 IIFE 还是嵌套三元组（自从发布我的原始答案后我越来越喜欢）或 R.cond([...]) 都无关紧要。如果有的话，“更大”的性能影响是内联函数的创建。但总的来说，这是一个过早的性能优化，最好使用 PureComponent 或 ShouldComponentUpdate。我的答案与接受的答案不同，主要是因为您不必创建不会在其他任何地方使用的类成员函数，并且可以内联。

【解决方案4】：

正如另一个答案所暗示的，有多种方法可以在反应中进行嵌套 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>
    );
}

这里是an article on conditional rendering in React，如果您有兴趣了解有关此主题的更多详细信息，请查看它。

【讨论】：

【解决方案5】：

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

  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>

【讨论】：

这太好了。正是我想要的。

【解决方案6】：

您可以嵌套尽可能多的语句。请遵循此代码，假设 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>
            ]
    ]
}

【讨论】：