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

最新推荐文章于 2024-05-12 12:59:34 发布

会做饭的技术男

最新推荐文章于 2024-05-12 12:59:34 发布

阅读量175

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h2020a12jhaa.html

版权

2508 篇文章 12 订阅

订阅专栏

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

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

关注