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

我想知道在ReactJSJSX中是否可以嵌套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>
  );
}

{
这个.state.loadingPage(
加载页
) : (
this.otherCondition&&title
身体
);
}

更新

最后，我选择了将其移动到renderContent并调用该函数的解决方案。不过，这两个答案都有效。我想我可以使用内联解决方案，如果它用于简单的渲染和更复杂的情况下的渲染内容

---

谢谢

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

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

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

这就抛出了错误

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

不能让两个表达式相邻

相反，您必须从条件运算符的false分支返回一个值。只需将其放在另一个JSX元素中即可：

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

(
{this.state.someBoolean？（某些标题）：（其他标题）}
身体
)

如果只想在显示“其他标题”时显示“正文”，则需要将

body

移动到条件运算符的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>
)

(
{this.state.someBoolean？（某些标题）：null}
身体
)

您需要将标题和正文包装在一个容器中。这可能是一个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>
    ]
}

---

语法

someBoolean&&“stuff”

：如果错误地将

someBoolean

设置为

0

或

NaN

，则该数字将呈现给DOM。因此，如果“boolean”可能是一个falsy数，那么使用

（someBoolean？：stuff:null）

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

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

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

{
(() => {
如果（条件一）
返回一个
如果（条件二）
返回两个
其他（条件一）
返回三
})()
}

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

renderContent（）{
返回(
{this.otherCondition&&title}
身体
);
}
render（）{
返回(
{ ... }
{
这个.state.loadingPage？
加载页
:
this.renderContent（）
}
{ ... }
)
}

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

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

render（）{
if（this.state.loadingPage）{
返回(
加载页
)
}
返回(
{this.otherCondition&&title}
身体
);
}

---

这里是，如果您对本主题的更多详细信息感兴趣，请查看。

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

  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.route==='projects'
? 
项目
:
this.state.route==“关于”
?
关于
:
this.state.route==='contact'
?
接触
:
违约

您可以嵌套尽可能多的语句。请遵循此代码，假设

this.state.firstTestValue

、

this.state.someTestValue

和

this.state.thirdValue测试

是来自该州的测试值

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

{this.state.firstTestValue
？第一个标题
: [
this.state.someTestValue
？第二名
: [
这是第三次价值测试
？第三个头衔
：最后标题
]
]
}

仅供参考

如果

/

其他

构造不是“循环”

（主体）

部分似乎不属于任何东西。那是个错误。“否则你的东西看起来很好。”费利克斯克林说，“如果我像身体一样做的话，那就行不通了。”。关键是我想在else中显示一些数据，在标题中显示另一个if。我明白，但是

foo？baz abc

不是有效的JavaScript。您需要

{this.state.someBoolean？…:}body

。您不能在两个表达式之后使用：

4 5

完全无效。这对声明来说不是问题。问题是我只想身体出现在其他标题中。使用“body”可能不是最好的选择。我可以重写您的原始代码，这样就没有意义了，而且与您的

if…else

示例不匹配。您想要的是

this.state.someBoolean？（一些标题）：（一些其他标题体）

然后。问题是，我只想在另一个条件为真时显示标题。正文将在else部分的第二个示例中显示，但是我需要标题上的另一个条件。该页面显示加载页面或主页（带或不带标题）。我用您的示例和附加条件更新了我的问题更新了我的答案。请注意，所有示例只显示外部条件的假分支，因为这是唯一不正确的地方。如果这仍然不是你想要的，我真的不知道你在说什么。我最终使用了你的第二个解决方案renderContent，因为我相信它更容易阅读和使用。谢谢你“最漂亮”