React jsx 中写更优雅、直观的条件运算符
2018-06-21 21:00
363 查看
在这篇文字中我学到了很多知识,同时结合工作中的一些经验也在思考一些东西。比如条件运算符
在
拿上面文章中的代码举个
上面的代码是根据
或者是下面这样显示不同的元素或组件
过多的javascript三目运算符在jsx中看起来并不那么容易,逻辑区分有时也会变的复杂
如果你又一些嵌套,情况会更复杂(大部分eslint并不能使用嵌套)
上面的代码我也遇到过,维护起来就像在沼泽里行走
我尝试着思考,能否将这种条件运算符进行更高级别的抽象,然后使用React组件实现它们呢?
经过尝试确实是可行的,于是我做了一些东西。抽象后
根据某个变量的值显示某个组件
同上,但是具有更高的可读性,而且逻辑和美观程度上优越于三目运算符
还有更多的选择,我应该不用做过多解释就能看明白下面的代码了
遍历一个
我创建这个仓库供大家尝试
你又任何想法?欢迎讨论。
感谢阅读
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>
我创建这个仓库供大家尝试
你又任何想法?欢迎讨论。
感谢阅读
相关文章推荐
- 利用条件运算符?:计算男女体重情况
- Unit 3 运算符和条件结构
- C 语言条件运算符详细讲解
- Java基础编程之利用条件运算符的嵌套来计算学生成绩
- python的条件(三元)运算符——实现b? x: y
- Java编程之条件运算符
- 条件(三目)运算符 (?:)
- oracle 条件查询,比较运算符,逻辑运算符,特殊运算符,判断空值,大小写敏感,多行,多列子查询
- 利用条件运算符的嵌套来完成此题:学习成绩> =90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示。
- 利用条件运算符的嵌套来完成此题:学习成绩> =90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示
- Java_13_运算符_二元运算符_取模运算_一元运算符_布尔逻辑表达符_位运算符_扩展运算符_三目条件运算符_运算符优先级
- C# 逻辑与条件运算符
- Python入门(四)Python运算符、条件语句、循环语句
- C#基础解析之Ⅱ【运算符和条件结构】
- 初学Java006 运算符及条件结构
- 不可或缺 Windows Native (3) - C 语言: 运算符,表达式,条件语句,循环语句,转向语句,空语句等
- python的条件(三元)运算符——实现b? x: y
- 困惑:条件运算符的异常
- JavaScript 运算符、条件语句、循环语句
- C/C++条件(三目)运算符巧妙原理解析