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并调用该函数的解决方案。这两个答案确实有效。我想我可以使用内联解决方案，如果它是一个简单的渲染和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">{ renderContent() }</div>;
}

请注意语法someBoolean && "stuff"：如果错误地将someBoolean设置为0或NaN，则该数字将呈现给DOM。因此，如果“boolean”可能是 falsy 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

替代方案中的代码无效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>
)

如果您只想展示＆＃34; body＆＃34;当＆＃34;其他一些标题＆＃34;如图所示，您需要将<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 4

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

在我看来，为了获得最佳的代码可读性，在这个场合，最好将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语句？

6 个答案: