React jsx 中寫更優雅、直觀的條件運算符

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

Conditional Operator

condition ? expr_if_true : expr_if_false

在jsx中書寫條件語句咱們常常都會使用到的就是三目運算符(?:)也叫內聯條件運算符，可能你們都有體會三目運算符並非一種直觀的書寫方式。特別是在複雜狀況下時。

拿上面文章中的代碼舉個🌰

return (
  <div> <p>Text: {this.state.text}</p> { view ? null : ( <p> <input onChange={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> <input onChange={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>
複製代碼

我建立這個倉庫供你們嘗試

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

感謝閱讀 🙌