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>
复制代码

我建立这个仓库供你们尝试

你又任何想法？欢迎讨论。

感谢阅读 🙌