我想知道是否可以在 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 并调用该函数的解决方案。不过，这两个答案都有效。我想我可能会使用内联解决方案，如果它是用于更复杂的情况下的简单渲染和渲染内容。
谢谢
您需要将标题和正文包装在一个容器中。那可能是一个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">{ this.renderContent() }</div>;
}
语法警告someBoolean && "stuff"：如果错误地someBoolean设置为0or NaN，则该 Number 将呈现给 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
)
这会引发错误
未捕获的语法错误：意外的数字（...）
你不能只有两个相邻的表达式。
相反，您必须从条件运算符的 false 分支返回单个值。你可以通过简单地将它放在另一个 JSX 元素中来做到这一点：
(
<div>
{this.state.someBoolean ? (<div>some title</div>) : (<div>some other title</div>)}
<div>body</div>
</div>
)
如果您只想在显示“其他标题”时显示“正文”，则需要移动<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>
)