zoukankan      html  css  js  c++  java
  • &&运算符,三木运算符与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 />}
    }

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

  • 相关阅读:
    面试基础02
    CustomerView
    Java封装性
    Java中参数传递机制:值传递
    Java重载 (Overlaod)与几个面试题
    数据结构、算法概述和简单的JVM内存解析
    异常捕捉

    面向接口的编程方式
    看程序的方法
  • 原文地址:https://www.cnblogs.com/penghuwan/p/6541676.html
Copyright © 2011-2022 走看看