React jsx 中写更优雅、直观的条件运算符

原创
2018/06/21 21:00
阅读数 675

这篇文字中我学到了很多知识,同时结合工作中的一些经验也在思考一些东西。比如条件运算符

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>

遍历一个arrayobject

<For of={['a', 'b', 'c']}>
  {(item, index) => (<p key={index}>{index}:{item}</p>)}
  <Default>default component</Default> {/*可提供一个默认组件*/}
</For>

我创建这个仓库供大家尝试

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

感谢阅读

展开阅读全文
打赏
0
1 收藏
分享
加载中

引用来自“OSC_LvJiwU”的评论

又封装成vue语法了吗?<template v-if="condicondition"></template>
出发的初衷不是这,只是为了在jsx中更好的使用条件语法
2018/06/21 23:28
回复
举报
又封装成vue语法了吗?<template v-if="condicondition"></template>
2018/06/21 22:46
回复
举报
更多评论
打赏
2 评论
1 收藏
0
分享
返回顶部
顶部