&&运算符,三木运算符与React的条件渲染
2024-10-17 22:03:02
在使用react框架的时候中往往会遇到需要条件渲染的情形,这时候,许多人会设想采用if语句来实现,比如下面,当满足条件condition时,conditonRender渲染组件ComponentA,当不满足 条件时,渲染ComponentB
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 />}
}
总结:其实两者效果一样,但在大量而复杂的代码块里,&&运算符和三木运算符的合理使用显然会大大增强代码的可读性
最新文章
- 系统级性能分析工具perf的介绍与使用
- el: 在jsp页面内使用函数判断子字符串
- [转]Jexus的常用操作和基本配置
- Implement Custom Cache Dependencies in ASP.NET 1.x
- 1071: [SCOI2007]组队 - BZOJ
- linux之ioctl函数解析
- Python实现Hadoop MapReduce程序
- iOS 10 之后,相机权限问题及易出现的Crash
- [jdoj1817]Drainage Ditches_网络流
- Linux之dmesg命令
- SAP中的BRF+
- C语言学习及应用笔记之七:C语言中的回调函数及使用方式
- 对迭代器操作的python 模块
- 【速读】——ResNeXt
- 【BZOJ1013】【JSOI2008】球形空间产生器 高斯消元
- 【LeetCode】89.Gary Code
- nodeJs实现微信小程序的图片上传
- Android - AsyncTask你知道多少?
- 【 js 基础 】【 源码学习 】backbone 源码阅读(三)
- 在ABBYY中如何修正倾斜的PDF页面