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

相关文章

来自专栏逆向技术

PE格式第七讲,重定位表

         PE格式第七讲,重定位表 一丶何为重定位(注意,不是重定位表格) 首先,我们先看一段代码,比如调用Printf函数,使用OD查看. ? 那么大...

1727
来自专栏技术墨客

React学习(4)——深入说明JSX与props

我们可以将JSX理解为React.createElement(component, props, ...children)方法的语法糖。JSX的代码:

542
来自专栏逆向与安全

网秦安全盾 原理分析

环境: 手机: 中兴 u887 系统 android2.3.5 调试器: IDA pro 6.5

730
来自专栏全华班

java招聘面试

过完年了,好多学习JAVA的同学在忙着找工作,大家先预习下这些基础知识 ,说不定能面试的时候考到。 基础篇 1 什么是Java、Java2、JDK?JDK后面...

3495
来自专栏java思维导图

mybatis思维导图,让mybatis不再难懂(二)

mybatis思维导图,让mybatis不再难懂(二) 上一篇文章写了mybatis的基本原理和配置文件的基本使用,这一篇写mybatis的使用,主要包括与sp...

3787
来自专栏开源优测

编程入门的姿势-5月8日微信群语音分享

开头语 5月8日在微信群,语音分享了如何如何学习编程语言、并以python为例进行了分享相关经验,下面整理成文章共享给大家。 神马?还有微信群? 加入微信群正确...

3337
来自专栏Google Dart

AngularDart 4.0 高级-结构指令 顶

本指南介绍Angular如何用结构指令操纵DOM,以及如何编写自己的结构指令来完成相同的操作。

752
来自专栏程序员互动联盟

【专业技术】在C/C++程序中打印当前函数调用栈

前几天帮同事跟踪的一个程序莫名退出,没有core dump(当然ulimit是打开的)的问题。我们知道,正常情况下,如果程序因为某种异常条件退出的话,应该会产生...

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

Silverlight:Dependency Property(依赖属性)学习笔记

学习SL/WPF,Dependency Properties(依赖属性)是一个全新(陌生)但又无法回避的概念。 http://www.wpftutorial.n...

1827
来自专栏企鹅号快讯

不到200行 JavaScript 代码如何实现富文本编辑器

作者:吴锴 http://www.wukai.me/2017/12/31/rich-text-editor-in-less-than-200-lines-jav...

1857

扫码关注云+社区