今天开始学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