如何在reactjs JSX中嵌套if语句?
我想知道是否有可能做嵌套reactjs
jsx
呢?
我尝试了各种不同的方法,但无法使其正常工作。
我在寻找
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并调用该函数的解决方案。这两个答案都确实有效。我想我可以使用内联解决方案,如果它用于简单的render和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">{ renderContent() }</div>; }
请注意语法
someBoolean && "stuff"
:如果错误地将其someBoolean
设置为0
或NaN
,则将Number呈现给DOM。因此,如果“布尔值”可能是
伪造的数字 ,则使用会更安全(someBoolean ? "stuff" : null)
。