关于javascript：如何在ReactJS JSX中进行嵌套的if语句？


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

我想知道如果在ReactJS JSX中是否可以嵌套呢？

我尝试了各种不同的方式，但我无法使其正常工作。

我在寻找

1
2
3
4
5
6
7
8
if (x) {
  loading screen
} else {
  if (y) {
    possible title if we need it
  }
  main
}

我已经尝试过了，但是无法渲染。我尝试了各种方法。一旦添加嵌套的if，它总是会中断。

1
2
3
4
5
6
7
8
9
10
{
  this.state.loadingPage ? (
    loading page
  ) : (
   
      this.otherCondition && title
      body
   
  );
}

更新

我最终选择了将其移至renderContent并调用该函数的解决方案。这两个答案都确实有效。我想我可以使用内联解决方案，如果它用于简单的render和renderContent来处理更复杂的情况。

谢谢

相关讨论

您需要将标题和正文package在容器中。那可能是一个div。如果改用列表，则dom中的元素要少一个。

1
2
3
4
5
6
7
8
9
10
{ this.state.loadingPage
  ? <span className="sr-only">Loading... Registered Devices</span>
  : [
      (this.state.someBoolean
        ? some title
        : null
      ),
      body
    ]
}

我建议不要嵌套三元语句，因为它很难阅读。有时，"尽早归还"比使用三元数更优雅。另外，如果只需要三元组的真实部分，则可以使用isBool && component。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
renderContent() {
  if (this.state.loadingPage) {
    return <span className="sr-only">Loading... Registered Devices</span>;
  }

  return [
    (this.state.someBoolean && some title),
    body
  ];
}

render() {
  return { this.renderContent() };
}

注意语法someBoolean &&"stuff"：如果错误地将someBoolean设置为0或NaN，则将Number呈现给DOM。因此，如果" boolean "可能是伪造的数字，则使用(someBoolean ?"stuff" : null)更为安全。

相关讨论

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

1
2
3
4
5
6
7
8
9
10
{
   (() => {
       if (conditionOne)
          return <span>One</span>
       if (conditionTwo)
          return <span>Two</span>
       else (conditionOne)
          return <span>Three</span>
   })()
}
相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
  this.state.route === 'projects'
  ?
   <Navigation onRouteChange={this.onRouteChange}/> Projects
  :
  this.state.route === 'about'
  ?
   <Navigation onRouteChange={this.onRouteChange}/> About
  :
  this.state.route === 'contact'
  ?
   <Navigation onRouteChange={this.onRouteChange}/> Contact
  :
  <p> default </p>

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

1
2
3
4
5
(
  this.state.someBoolean ?
  (some title):(some other title)
  body
)

让我们简化为

1
2
3
4
(
  true ? 42 : 21
  3
)

这将引发错误

Uncaught SyntaxError: Unexpected number(a€|)

您不能仅将两个表达式彼此相邻。

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

1
2
3
4
5
6
(
 
    {this.state.someBoolean ? (some title) : (some other title)}
    body
 
)

如果仅在显示"其他标题"时仅显示" body"，则需要将body移至条件运算符的false分支中：

1
2
3
4
5
6
7
8
(
  this.state.someBoolean ?
    (some title) :
    (
       some other title
       body
    )
)

也许你想要

1
2
3
4
5
6
(
 
    {this.state.someBoolean ? (some title) : null}
    body</body>
 
)
相关讨论

您可以嵌套尽可能多的语句。请假设this.state.firstTestValue，this.state.someTestValue和this.state.thirdValueTest是该状态下的测试值，请遵循此代码。

1
2
3
4
5
6
7
8
9
10
11
12
{this.state.firstTestValue
    ? First Title
    : [
        this.state.someTestValue
            ? Second Title
            : [
                this.state.thirdValueTest
                ? Some Third Title
                : Last Title
            ]
    ]
}

正如另一个答案所暗示的，如果有其他反应，有多种方法可以嵌套。使用哪一个取决于情况和偏好。

我认为，为了获得最佳代码可读性，在这种情况下，最好将else的内容移到单独的函数中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
renderContent() {
     return (
         
             { this.otherCondition && title }
             body
         
     );
}

render() {
    return (
       
            { ... }
            {
                this.state.loadingPage ?
                    loading page
                    :
                    this.renderContent()
            }
            { ... }
       
    )
}

或者如果足够简单(如果没有其他元素被渲染)，我会选择：

1
2
3
4
5
6
7
8
9
10
11
12
13
render() {
    if (this.state.loadingPage) {
        return (
            loading page
        )
    }
    return (
       
            { this.otherCondition && title }
            body
       
    );
}

这里有一篇关于React中条件渲染的文章，所以如果您对此主题的更多细节感兴趣，请查看。