我想知道是否有可能做嵌套reactjs jsx呢?
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如果只需要三元组的真实部分,则可以使用。
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)。
someBoolean && "stuff"
someBoolean
0
NaN
(someBoolean ? "stuff" : null)