在 React 中条件渲染 JSX 的 4 种方法

在 React 中，条件渲染 JSX 是一项非常常见且必不可少的功能。在 React 中，我们可以通过 4 种方式条件渲染 JSX：

三元运算符
逻辑运算符
如果，否则，否则如果
Switch 语句

一般来说，开发者不会在 JSX 中使用if elseor来进行条件渲染。因为or比orswitch statement需要更多代码行。但是，当你需要处理两个以上的条件时，就必须使用or 了。if elseswitch statementternary operatorlogical operatorif elseswitch statement

三元运算符

function TernaryOperator() {

  return (
    <>     
        {
            /* Ternary Operator */

            'a'==='a' ? <p>Hi</p> : <p>Bye</p>
        } 
    </>
  )

}

export default TernaryOperator

解释

只有当条件'a'==='a'为真时，Hi才会在屏幕上渲染。否则，Bye才会在屏幕上渲染。

笔记：

这不是一个很现实的例子，因为'a'==='a'在实际应用中你永远不会进行比较。但这种比较并不是这里的重点。重点是三元运算符的用法。

逻辑运算符

AND &&（逻辑运算符）

function LogicalAnd() {

  return (
    <>     
        {
            /* Logical 'AND' Operator*/

            'a'==='a' && <p>Hi</p>
        } 
    </>
)

}

export default LogicalAnd
)

解释

只有当条件'a'==='a'为真时，Hi才会在屏幕上渲染。

OR ||（逻辑运算符）

function LogicalOR({name, labelText}) {

  return (
    <>       
        /* Logical 'OR' Operator*/
         {labelText || name}      
    </>
  )
}

export default LogicalOR

解释：

如果将labelText和name两个 prop 传入此组件，labelText则会在屏幕上渲染。但如果只传递其中一个（name或labelText）作为 prop，则传递的 prop 将会被渲染到屏幕上。

NOT !（逻辑运算符）


function LogicalNOT ({name})  { 

    /* Logical NOT Operator */
    if (!name) {  
      return null; 
    }              


    return <p>Hi! My name is {name}.</p>;
  }

 export default LogicalNOT

解释

只有name传递了该 propHi! My name is {name}.才会在屏幕上渲染，否则屏幕上不会渲染任何内容。

笔记

if (!name) { return null }，像这样提前返回被称为Early Return。Early Return也称为Guard Clause或Bouncer Pattern。

如果，否则，否则如果

function IfElse() {

    return ( 
      <>     
          {
            /*If else condition within an anonymous function*/

              (() => {
                  if('a'==='b') {
                          return (
                              <p>Hi</p>
                          )
                      } else if ('b'==='b') {
                          return (
                          <p>Hello</p>
                          )
                      } else {
                          return (
                              <p>Bye</p>
                          )
                      }
              })()  
          }  
      </>  
    )


}

export default IfElse

笔记：

必须使用匿名函数（还需要立即调用该函数）

Switch 语句

function SwitchStatement() {

  return ( 
    <>     
        {

           /*Switch Statement within an anonymous function*/

            (() => {
                switch(true) {

                    case('a'==='b'): {
                            return (
                                <p>Hello</p>
                            )
                        }
                    break;

                    case('a'==='a'): {
                        return (
                            <p>Hi</p>
                        )
                    }
                    break;

                    default: {
                            return (
                                <p>Bye</p>
                            )
                        }
                    break;
                    }
            })()  
        }  
    </>  
)

}

export default SwitchStatement

笔记：

必须使用匿名函数（还需要立即调用该函数）

就是这样。😃 感谢阅读。🎉

文章来源：https://dev.to/rasaf_ibrahim/4-ways-to-render-jsx-conditionally-in-react-2bal