在這篇文字中我學到了很多知識，同時結合工作中的一些經驗也在思考一些東西。比如條件運算符

Conditional Operator

condition ? expr_if_true : expr_if_false

在jsx中書寫條件語句我們經常都會使用到的就是三目運算符(?:)也叫內聯條件運算符，可能大家都有體會三目運算符并不是一種直觀的書寫方式。特別是在復雜情況下時。

拿上面文章中的代碼舉個

return (<div><p>Text: {this.state.text}</p>{view? null: (<p><inputonChange={this.handleChange}value={this.state.inputText} /></p>)}</div> );

上面的代碼是根據view變量為false時顯示一個p元素

或者是下面這樣顯示不同的元素或組件

return (<div><p>Text: {this.state.text}</p>{view? (<p>something value</p>) : (<p><inputonChange={this.handleChange}value={this.state.inputText} /></p>)}</div> );

過多的javascript三目運算符在jsx中看起來并不那么容易，邏輯區分有時也會變的復雜

如果你又一些嵌套，情況會更復雜(大部分eslint并不能使用嵌套)

return (<div>{ condition1? <Component1 />: ( condition2? <Component2 />: ( condition3? <Component3 />: <Component 4 />))}</div> );

上面的代碼我也遇到過，維護起來就像在沼澤里行走

我嘗試著思考，能否將這種條件運算符進行更高級別的抽象，然后使用React組件實現它們呢？

經過嘗試確實是可行的，于是我做了一些東西。抽象后jsx條件運算就像下面這樣

根據某個變量的值顯示某個組件

<If when={this.state.logic}><p>??show component</p> </If>
同上，但是具有更高的可讀性，而且邏輯和美觀程度上優越于三目運算符

<If when={this.state.logic}><p>??show component</p><If when={this.state.logic}><p>other component</p></If> </If>
還有更多的選擇，我應該不用做過多解釋就能看明白下面的代碼了

<Switch value={value}><Case when={condition}><p>condition 1</p></Case><Case when={condition}><p>condition 2</p></Case><Case when='c' children={<p>condition 3</p>}/><Default children={<p>default component</p>}/> {/*可提供一個默認組件*/} </Switch>
遍歷一個array或object

<For of={['a', 'b', 'c']}>{(item, index) => (<p key={index}>{index}：{item}</p>)}<Default>default component</Default> {/*可提供一個默認組件*/} </For>

我創建這個倉庫供大家嘗試

你又任何想法？歡迎討論。

感謝閱讀

原文發布時間為：2018年06月21日
原文作者：Monster000

本文來源：?掘金?如需轉載請聯系原作者

總結

以上是生活随笔為你收集整理的React jsx 中写更优雅、直观的条件运算符的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。