&&运算符,三木运算符与React的条件渲染
2017-03-13 10:54
246 查看
在使用react框架的时候中往往会遇到需要条件渲染的情形,这时候,许多人会设想采用if语句来实现,比如下面,当满足条件condition时,conditonRender渲染组件ComponentA,当不满足 条件时,渲染ComponentB
其实,结合三木运算符以及JSX的语法糖,它在形式和逻辑上可以变得更紧凑一些,比如:
同样的一些情况,我们也可以尝试用&&运算符实现条件渲染,比如在满足条件condition时,conditonRender渲染组件Component
改成如下,因为&&运算符的特性,当condition为true时需要检查&&后面那个表达式boolean值(true or false),那么Component就被渲染出来,而当conditon为false时,不在检查&&运算符后面表达式的boolean值,那么Component就被隐藏了
总结:其实两者效果一样,但在大量而复杂的代码块里,&&运算符和三木运算符的合理使用显然会大大增强代码的可读性
const conditionRender = () =>{ if(condition){ return <ComponentA /> } else{ return <ComponentB /> } }
其实,结合三木运算符以及JSX的语法糖,它在形式和逻辑上可以变得更紧凑一些,比如:
const conditionRender = () =>{ return {condition?<componentA />:<componentB />} }
同样的一些情况,我们也可以尝试用&&运算符实现条件渲染,比如在满足条件condition时,conditonRender渲染组件Component
const conditionRender = () =>{ if(condition){ return <Component /> } }
改成如下,因为&&运算符的特性,当condition为true时需要检查&&后面那个表达式boolean值(true or false),那么Component就被渲染出来,而当conditon为false时,不在检查&&运算符后面表达式的boolean值,那么Component就被隐藏了
const conditionRender = () =>{ return {condition&&<Component />} }
总结:其实两者效果一样,但在大量而复杂的代码块里,&&运算符和三木运算符的合理使用显然会大大增强代码的可读性
相关文章推荐
- &&运算符,三木运算符与React的条件渲染
- 在 React 条件渲染中使用三元表达式和 “&&”
- 在 React 条件渲染中使用三元表达式和 “&&”
- php foreach 使用&(与运算符)引用赋值要注意的问题
- javascript运算符:==与===的区别,||和&&特殊用法
- 利用C的&&(逻辑与)和||(逻辑或)设计三元分支运算符
- 配列やコレクションの繰り返し処理の条件を指定する<logic:iterate>
- &&、||、?:、,四个运算符的求值顺序
- < Unity 3D专栏 >动态创建对象,并渲染贴图,动态添加删除脚本
- 《C++第九周实验报告1-1》--------接第8周任务1,定义Complex类中的<<和>>运算符的重载,实现输入和输出
- 2.2 在不使用运算符&&或|| 的条件下编写一个与上面的for循环语句等价的循环语句。
- JAVA 运算符 >> >>> <<
- 第九周C++上机报告(定义Complex类中的<<和>>运算符的重载)
- 题目:利用条件运算符的嵌套来完成此题:学习成绩>=90分的同学用A表示......
- 练习2-2 在不使用运算符&&或者||的条件下编写一个与上面的for循环语句等价的循环语句。
- &amp;运算符
- >>> java的扩展移位运算符 无符号右移
- 逻辑与和条件与的区别(&&和&)
- 利用条件运算符的嵌套来完成此题:学习成绩> =90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示。
- <excel>条件求和方法