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

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

Conditional Operator

condition ? expr_if_true : expr_if_false

在jsx中书写条件语句我们经常都会使用到的就是三目运算符(?:)也叫内联条件运算符，可能大家都有体会三目运算符并不是一种直观的书写方式。特别是在复杂情况下时。

拿上面文章中的代码举个

return (<div><p>Text: {this.state.text}</p>{view? null: (<p><inputonChange={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><inputonChange={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>

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

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

感谢阅读

原文发布时间为：2018年06月21日
原文作者：Monster000

本文来源：掘金如需转载请联系原作者

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

如何在React Native中写一个自定义模块
前言在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...
如何在 React Native 中写一个自定义模块
前言在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...
在react项目中编写css,更好的在react项目中写css代码--emotion
简介: emotion是一个JavaScript库,使用emotion可以用写js的方式写css代码.在react中安装emotion后,可以很方便进行css的封装,复用.使用emotion后,浏览器 ...
python代码大全p-代码这样写更优雅(Python版)
要写出 Pythonic(优雅的.地道的.整洁的)代码,还要平时多观察那些大牛代码,Github 上有很多非常优秀的源代码值得阅读,比如:requests.flask.tornado,笔者列举一些常见 ...
代码这样写更优雅(Python版)
2019独角兽企业重金招聘Python工程师标准>>> Python 这门语言最大的优点之一就是语法简洁,好的代码就像伪代码一样,干净.整洁.一目了然.但有时候我们写代码,特别是 P ...
Java项目中如何更优雅的处理空值？
点击上方好好学java ,选择星标公众号重磅资讯,干货,第一时间送达今日推荐:推荐19个github超牛逼项目!个人原创100W +访问量博客:点击前往,查看更多来源:https://lrw ...
python优雅代码大全_代码这样写更优雅(Python版)
Python 这门语言最大的优点之一就是语法简洁,好的代码就像伪代码一样,干净.整洁.一目了然.但有时候我们写代码,特别是 Python 初学者,往往还是按照其它语言的思维习惯来写,那样的写法不仅运行 ...
后端：Java中如何更优雅的处理空值，看完你就懂了！
导语在笔者几年的开发经验中,经常看到项目中存在到处空值判断的情况,这些判断,会让人觉得摸不着头绪,它的出现很有可能和当前的业务逻辑并没有关系.但它会让你很头疼. 有时候,更可怕的是系统因为这些空值的 ...
Python代码这样写更优雅（转）
1.变量交换大部分编程语言中交换两个变量的值时,不得不引入一个临时变量: >>> a = 1>>> b = 2>>> tmp = a>&g ...

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

Conditional Operator

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

最新文章

热门文章