&&运算符,三木运算符与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 条评论
登录 后参与评论

相关文章

来自专栏向治洪

React 之props属性

React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现。 可以使用 JSX ...

2075
来自专栏菩提树下的杨过

Reactor 3 学习笔记(2)

上面的代码,reduce相当于把1到10累加求和,reduceWith则是先指定一个起始值,然后在这个起始值基础上再累加。(tips: 除了累加,还可以做阶乘)...

2602
来自专栏飞扬的花生

JQuery常用方法总结

1.json的创建方式 <script> $(function () { //第一种 var my = new Peop...

2137
来自专栏自由而无用的灵魂的碎碎念

转: 细说HTML元素的ID和Name属性的区别

可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案...

973
来自专栏禅林阆苑

Vue2.5源码阅读笔记02—虚拟DOM的创建与渲染

Vue是数据驱动的MVVM框架,视图是由数据驱动生成的,因此对视图的修改不是通过操作 DOM,而是通过修改数据,相比传统使用jQuery的前端开发,能够大大简化...

1K77
来自专栏图像识别与深度学习

《HTML5实战》Lesson04

Week05    2016/10/12上午1-4节 一、复习 二、Javascirpt 1,html5中使用内部javascript <script>可以...

2714
来自专栏前端儿

SASS用法指南

SASS是ruby写的,所以要想将sass编译成css文件,就给配上ruby环境。

1302
来自专栏互联网杂技

js事件

1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body...

35311
来自专栏三丰SanFeng

字节对齐

什么是对齐,以及为什么要对齐: 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定变...

2055
来自专栏xingoo, 一个梦想做发明家的程序员

使用DOM动态创建标签

本文是参考《javascript Dom 编程艺术》第八章的内容所写,用到的知识点,就是关于创建平稳的web页面。 使用DOM方法:   getEleme...

2009

扫码关注云+社区