&&运算符,三木运算符与React的条件渲染

在使用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 />}
}

总结:其实两者效果一样,但在大量而复杂的代码块里,&&运算符和三木运算符的合理使用显然会大大增强代码的可读性

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

前端学习自学笔记:day09

今天是第九天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: ? 第九天的笔记:HTML AND CSS: -复...

1686
来自专栏蘑菇先生的技术笔记

探索c#之递归APS和CPS

2497
来自专栏章鱼的慢慢技术路

Go语言相关练习_选择题(2)

go语言中字符串是UTF-8编码并存储的,它语言不定长的字节,所以它不支持下标操作,因为没一个下标操作代表的是固定长度的字节,所以不能对字符串中某个字符单独赋值...

702
来自专栏北京马哥教育

Shell特殊变量和命令行参数详解

? 1.shell变量基础 shell变量是一种很“弱”的变量,默认情况下,一个变量保存一个串,shell不关心这个串是什么含义。 所以若要进行数学运算,必须...

3416
来自专栏python成长之路

文件常用操作

1439
来自专栏十月梦想

框模型

     元素框的实际宽度:width+左右外边距+左右border边框+左右内边距

813
来自专栏java达人

Java 8 Stream 教程 (一)

作者:Benjamin 译者:java达人 来源:http://winterbe.com/posts/2014/07/31/java8-stream-tut...

21110
来自专栏C/C++基础

Shell特殊字符

shell既是类Unix操作系统的命令解析器,用于解释执行用户输入的一连串命令,它类似于DOS下的command和后来Windows的cmd.exe。同时she...

661
来自专栏架构师小秘圈

shell脚本极简教程

一,shell题记 不懂shell的程序员不是好程序员,学习shell是为了自动化,使用自动化可以非常有效的提高工作效率。没有一个大公司不要求linux的基本技...

3546
来自专栏杨熹的专栏

Python 爬虫 1 快速入门

Python 爬虫 快速入门 参考资料:极客学院: Python定向爬虫 代码:1.crawler-basic.ipynb 本文内容: 正则表达式 用正则表达式...

2764

扫码关注云+社区