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

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

感谢

您需要将标题和正文包装在一个容器中。这可能是一个div。如果您使用片段，那么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。因此，如果"；布尔值"；可能是一个错误数字，使用(someBoolean ? "stuff" : null)更安全。

您可以简单地调用内联表达式：

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

您可以检查多个条件来相应地渲染组件，如下所示：

  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>

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

备选方案中的代码不是有效的JavaScript/JSX表达式：

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

让我们将其简化为

(
  true ? 42 : 21
  3
)

这抛出错误

未捕获的SyntaxError：意外的数字（…）

你不能只让两个表达式挨在一起。

相反，您必须从条件运算符的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>
)

正如另一个答案所示，有多种方法可以进行嵌套if-else-in-rect。使用哪一个取决于情况和偏好。

在我看来，为了获得最佳的代码可读性，在这种情况下，最好将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中的条件渲染的文章，所以如果你对这个主题的更多细节感兴趣，请查看它。

相关内容

最新更新

热门标签：