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

Monster000發表於2018-06-21
ReactJS

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

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>
複製程式碼

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

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

感謝閱讀 ?

相關文章