react组件条件渲染的几种方式

前言：最近使用react组件条件渲染，一般用三目运算符最合适了，其他方式看情况而用。

一、条件表达式渲染 （适用于两个组件二选一的渲染）

 1 render() {
 2   const isLoggedIn = this.state.isLoggedIn;
 3   return (
 4     

 5       {isLoggedIn ? (
 6         
 7       ) : (
 8         
 9       )}
10     
11   );
12 }

二、&& 操作符渲染 (适用于一个组件有无的渲染)

 1 function Mailbox(props) {
 2   const unreadMessages = props.unreadMessages;
 3   return (
 4     

 5       
Hello!
 6       {unreadMessages.length > 0 &&
 7         

 8           You have {unreadMessages.length} unread messages.
 9         
10       }
11     
12   );
13 }

三、利用变量输出组件渲染 （适用于有多个组件多种条件下的渲染）

 1 render() {
 2     const isLoggedIn = this.state.isLoggedIn;
 3     
 4     const button = isLoggedIn ? (
 5       
 6     ) : (
 7       
 8     );
 9 
10     return (
11       

12         
13         {button}
14       
15     );
16   }

四、利用函数方法输出组件或者利用函数式组件进行渲染 （适用于多个子组件需要根据复杂的条件输出的情况）

1. 函数方式

 1 renderButton(){
 2     const isLoggedIn = this.state.isLoggedIn;
 3     if(isLoggedIn)
 4     {
 5        return ();
 6     }
 7     else
 8     {
 9       return ();
10     }
11 }
12 
13 render() {
14     return (
15       

16         
17         {this.renderButton()}
18       
19     );
20   }

 

2. 函数式组件

 1 function Greeting(props) {
 2   const isLoggedIn = props.isLoggedIn;
 3   if (isLoggedIn) {
 4     return ;
 5   }
 6   return ;
 7 }
 8 
 9 ReactDOM.render(
10   // Try changing to isLoggedIn={true}:
11   ,
12   document.getElementById('root')
13 );