在這篇文字中我學(xué)到了很多知識(shí)，同時(shí)結(jié)合工作中的一些經(jīng)驗(yàn)也在思考一些東西。比如條件運(yùn)算符

Conditional Operator

condition ? expr_if_true : expr_if_false

在jsx中書寫條件語句我們經(jīng)常都會(huì)使用到的就是三目運(yùn)算符(?:)也叫內(nèi)聯(lián)條件運(yùn)算符，可能大家都有體會(huì)三目運(yùn)算符并不是一種直觀的書寫方式。特別是在復(fù)雜情況下時(shí)。

拿上面文章中的代碼舉個(gè)

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

上面的代碼是根據(jù)view變量為false時(shí)顯示一個(gè)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三目運(yùn)算符在jsx中看起來并不那么容易，邏輯區(qū)分有時(shí)也會(huì)變的復(fù)雜

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

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

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

我嘗試著思考，能否將這種條件運(yùn)算符進(jìn)行更高級(jí)別的抽象，然后使用React組件實(shí)現(xiàn)它們呢？

經(jīng)過嘗試確實(shí)是可行的，于是我做了一些東西。抽象后jsx條件運(yùn)算就像下面這樣

根據(jù)某個(gè)變量的值顯示某個(gè)組件

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

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

<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>}/> {/*可提供一個(gè)默認(rèn)組件*/} </Switch>
遍歷一個(gè)array或object

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

我創(chuàng)建這個(gè)倉庫供大家嘗試

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

感謝閱讀

原文發(fā)布時(shí)間為：2018年06月21日
原文作者：Monster000

本文來源：?掘金?如需轉(zhuǎn)載請(qǐng)聯(lián)系原作者

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。