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

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

 render() {
   const isLoggedIn = this.state.isLoggedIn;
   return (
     <div>
       {isLoggedIn ? (
         <LogoutButton onClick={this.handleLogoutClick} />
       ) : (
         <LoginButton onClick={this.handleLoginClick} />
       )}
     </div>
   );
 }

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

 function Mailbox(props) {
   const unreadMessages = props.unreadMessages;
   return (
     <div>
       <h1>Hello!</h1>
       {unreadMessages.length > 0 &&
         <h2>
           You have {unreadMessages.length} unread messages.
         </h2>
       }
     </div>
   );
 }

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

 render() {
     const isLoggedIn = this.state.isLoggedIn;

     const button = isLoggedIn ? (
       <LogoutButton onClick={this.handleLogoutClick} />
     ) : (
       <LoginButton onClick={this.handleLoginClick} />
     );

     return (
       <div>
         <Greeting isLoggedIn={isLoggedIn} />
         {button}
       </div>
     );
   }

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

1. 函数方式

 renderButton(){
     const isLoggedIn = this.state.isLoggedIn;
     if(isLoggedIn)
     {
        return (<LogoutButton onClick={this.handleLogoutClick} />);
     }
     else
     {
       return (<LoginButton onClick={this.handleLoginClick} />);
     }
 }

 render() {
     return (
       <div>
         <Greeting />
         {this.renderButton()}
       </div>
     );
   }

2. 函数式组件

 function Greeting(props) {
   const isLoggedIn = props.isLoggedIn;
   if (isLoggedIn) {
     return <UserGreeting />;
   }
   return <GuestGreeting />;
 }

 ReactDOM.render(
   // Try changing to isLoggedIn={true}:
   <Greeting isLoggedIn={false} />,
   document.getElementById('root')
 );