JSX条件渲染

Yukino 488 2021-12-29

今天开始学React,之前大部分时间都是用的v-if,极少数时候用JSX时条件渲染是通过三目运算符完成的,React文档中对JSX的条件渲染比较详细,故记录一下

  1. 元素变量(if)
    通过if判断返回不同的组件:

    function Btn(props) {
      if (props.isLoading) {
        return <button>Loading</button>
      } else {
        return <button>Submit</button>
      }
    }
    

    这种方式适合于条件渲染不同的组件。

  2. “与”运算符(&&)

    通过与运算符的特性(true && expression 总是会返回 expression, 而 false && expression 总是会返回 false)可以很方便的实现条件渲染

    function Btn(props) {
      const hasAccess = props.hasAccess;
      return hasAccess && <button>Submit</button>
    }
    

    值得注意的是,如果条件是一个非bool的变量/表达式expression,那么在expression为false时,将会返回expression的值,例如:

    const messages = [];
    <MailBox unreadMessage={messages}></MailBox>
    /*---------Wrong-----------*/
    function MailBox(props) {
      const unreadMessages = props.unReadMessages;
      return unreadMessages.length && <p>You have {unreadMessages} unread messages</p>;
    }
    // 将会渲染一个0
    /*---------Correct-----------*/
    function MailBox(props) {
      const unreadMessages = props.unReadMessages;
      return unreadMessages.length && <p>You have {unreadMessages} unread messages</p>;
    }
    // 什么都不会渲染
    
  3. 三目运算符

    三目运算符类似于元素变量

    function Btn(props) {
      return props.isLoading 
        			? <button>Loading</button>
          		: <button>Submit</button>
    }
    
    // 也可以直接在需要判断的地方使用
    function Btn(props) {
      return <button>{ props.isLoading ? 'Loading' : 'Submit'}</button>;
    }
    

    三目运算符适合于组件内部小部分条件渲染。

  4. 阻止组件渲染

    阻止组件渲染是在返回前使用if判断,如果满足特定条件,则提前返回null,阻止组件渲染

    function Btn(props) {
      if (!props.hasEdit) {
        return null;
      }
      return <button>Edit</button>;
    }
    

# 前端 # JS # JSX