如何在ReactJS JSX中执行嵌套的if else语句？
如何在ReactJS JSX中执行嵌套的if else语句？
提问于 2016-05-19 08:33:11
我想知道在ReactJS JSX中是否有可能做嵌套的if 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>
);
}更新
我最终选择了将其移动到renderContent并调用该函数的解决方案。然而，这两个答案都是有效的。我想我可能会使用内联解决方案，如果它是一个简单的渲染和renderContent对于更复杂的情况。
谢谢
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-05-19 09:41:55
您需要将标题和正文包装在一个容器中。这可能是一个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设置为0或NaN，则该数字将呈现给DOM。因此，如果"boolean“可能是一个falsy数字，那么使用(someBoolean ? "stuff" : null)会更安全。
Stack Overflow用户
发布于 2017-03-31 10:12:53
您可以简单地调用内联表达式，而不是像通常建议的那样嵌套三元运算符或创建一个不会在其他任何地方重用的单独函数：
<div className="some-container">
{
(() => {
if (conditionOne)
return <span>One</span>
if (conditionTwo)
return <span>Two</span>
else (conditionOne)
return <span>Three</span>
})()
}
</div>Stack Overflow用户
发布于 2019-05-23 02:28:07
您可以选择多个条件来渲染组件，如下所示：
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37312122
复制相关文章
相似问题