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

Question

我想知道是否可以在 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 用于更复杂的情况。

谢谢

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

你不能让两个表达式紧挨着。

相反，您必须 return 来自条件运算符的 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 2

您需要将您的标题和 body 包装在一个容器中。那可能是 div。如果您改用片段，您将在 dom.

中少一个元素

{ this.state.loadingPage
  ? <span className="sr-only">Loading... Registered Devices</span>
  : <>
      {this.state.someBoolean
        ? <div>some title</div>
        : null
      }
      <div>body</div>
    </>
}

我建议不要嵌套三元语句，因为它很难阅读。有时“return early”比使用三元更优雅。另外，如果你只想要三元的真实部分，你可以使用 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.因此，如果“布尔值”可能是 虚假数字 ，使用 (someBoolean ? "stuff" : null).

会更安全

Answer 3

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

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

Answer 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，所以如果您对这个主题的更多细节感兴趣，请查看。

Answer 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>

Answer 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>
            ]
    ]
}

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

How to do a nested if else statement in ReactJS JSX?

javascript

jsx

ecmascript-6

reactjs