Javascript 如何在 reactjs JSX 中执行嵌套的 if else 语句？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37312122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to do a nested if else statement in reactjs JSX?
提问by ALM
I wanted to know if its possible to do nested if else if in reactjsjsx?
我想知道是否可以嵌套 if else if in reactjsjsx？
I have tried various different ways and I am unable to get it to work.
我尝试了各种不同的方法，但无法使其正常工作。
I am looking for
我在寻找
if (x) {
loading screen
} else {
if (y) {
possible title if we need it
}
main
}
I have tried this but I can not get it to render. I have tried various ways. It always breaks once I add the nested if.
我试过这个，但我无法渲染它。我尝试了各种方法。一旦我添加了嵌套的 if，它总是会中断。
{
this.state.loadingPage ?
(<div>loading page</div>) :
(<div>
this.otherCondition && <div>title</div>
<div>body</div>
</div>)
}
Update
更新
I ended up choosing the solution to move this to renderContent and call the function. Both of the answers did work though. I think I may use the inline solution if it is for a simple render and renderContent for more complicated cases.
我最终选择了将其移动到 renderContent 并调用该函数的解决方案。不过，这两个答案都有效。我想我可以使用内联解决方案，如果它是用于更复杂情况的简单渲染和渲染内容。
Thank you
谢谢
回答by Neal Ehardt
You need to wrap your title and body in a container. That could be a div. If you use a listinstead, you'll have one less element in the dom.
您需要将标题和正文包装在一个容器中。那可能是一个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>
]
}
I would advise against nesting ternary statements because it's hard to read. Sometimes it's more elegant to "return early" than to use a ternary. Also, you can use isBool && componentif you only want the true part of the ternary.
我建议不要嵌套三元语句，因为它很难阅读。有时“提前返回”比使用三元更优雅。此外，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>;
}
Caveat to the syntax someBoolean && "stuff": if by mistake, someBooleanis set to 0or NaN, that Number will be rendered to the DOM. So if the "boolean" might be a falsy Number, it's safer to use (someBoolean ? "stuff" : null).
注意语法someBoolean && "stuff"：如果错误地someBoolean设置为0or NaN，则该 Number 将呈现给 DOM。因此，如果“布尔值”可能是一个假数字，则使用(someBoolean ? "stuff" : null).
回答by dehumanizer
Instead of nesting ternary operators as it is often suggested or creating a separate function that will not be reused anywhere else, you can simply call an inline expression:
您可以简单地调用内联表达式，而不是像通常建议的那样嵌套三元运算符或创建一个不会在其他任何地方重用的单独函数：
<div className="some-container">
{
(() => {
if (conditionOne)
return <span>One</span>
if (conditionTwo)
return <span>Two</span>
else (conditionOne)
return <span>Three</span>
})()
}
</div>
回答by Felix Kling
Your code in the alternative is not valid JavaScript/JSX expression:
您的替代代码不是有效的 JavaScript/JSX 表达式：
(
this.state.someBoolean ?
(<div>some title</div>):(<div>some other title</div>)
<div>body</div>
)
Lets simplify this to
让我们将其简化为
(
true ? 42 : 21
3
)
This throws the error
这会引发错误
Uncaught SyntaxError: Unexpected number(…)
未捕获的语法错误：意外的数字（...）
You cannot just have two expression next to each other.
你不能只有两个相邻的表达式。
Instead you have to return a single value from the false branch of the conditional operator. You can do this by simply putting it in another JSX element:
相反，您必须从条件运算符的 false 分支返回单个值。你可以简单地把它放在另一个 JSX 元素中：
(
<div>
{this.state.someBoolean ? (<div>some title</div>) : (<div>some other title</div>)}
<div>body</div>
</div>
)
If you want to only show "body" when "some other title" is shown, you need to move <div>body</div>into the false branch of the conditional operator:
如果您只想在显示“其他标题”时显示“正文”，则需要<div>body</div>进入条件运算符的 false 分支：
(
this.state.someBoolean ?
(<div>some title</div>) :
(<div>
<div>some other title</div>
<div>body</div>
</div>)
)
Or maybe you want
或者也许你想要
(
<div>
{this.state.someBoolean ? (<div>some title</div>) : null}
<div>body</body>
</div>
)
回答by Akshata Dabade
You can check multiple conditions to render components accordingly like below:
您可以检查多个条件以相应地呈现组件，如下所示：
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>
回答by Bryan Austin
You can nest as many statements as possible. please follow this code assuming that this.state.firstTestValue, this.state.someTestValueand this.state.thirdValueTestare your test values from the state.
您可以嵌套尽可能多的语句。请点击此代码假设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>
]
]
}
回答by Nesha Zoric
As the other answer suggest, there are various ways to do a nested if else in react. Which one to use depends on situation and preferences.
正如另一个答案所暗示的那样，有多种方法可以在反应中进行嵌套 if else。使用哪一种取决于情况和偏好。
In my opinion, for best code readability, on this occassion it'd be best to move the content of else to separate function:
在我看来，为了获得最佳代码可读性，在这种情况下，最好将 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>
)
}
Or if it's simple enough (in case no other elements are rendered), I'd go with:
或者如果它足够简单（如果没有其他元素被渲染），我会选择：
render() {
if (this.state.loadingPage) {
return (
<div>loading page</div>
)
}
return (
<div>
{ this.otherCondition && <div>title</div> }
<div>body</div>
</div>
);
}
Here's an article on conditional rendering in React, so please check it out if you're interested in more details on this topic.
这是一篇关于 React 中的条件渲染的文章，如果您对此主题的更多详细信息感兴趣，请查看它。
