1.React中的条件渲染

React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。

//需要渲染的组件
function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

//根据用户是否登录决定显示上面的哪个组件
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')
);

上面例子中的isLoggedIn是直接写死的，但真实情况下大多是根据组件的状态决定，下面会介绍几种常用的条件渲染方法

2.条件渲染方法

1. 使用变量储存React元素，实现条件渲染

   function LoginButton(props) {
     return (
       <button onClick={props.onClick}>
         Login
       </button>
     );
   }
   
   function LogoutButton(props) {
     return (
       <button onClick={props.onClick}>
         Logout
       </button>
     );
   }
   
   class LoginControl extends React.Component {
     constructor(props) {
       super(props);
       this.handleLoginClick = this.handleLoginClick.bind(this);
       this.handleLogoutClick = this.handleLogoutClick.bind(this);
       this.state = {isLoggedIn: false};
     }
   
     handleLoginClick() {
       this.setState({isLoggedIn: true});
     }
   
     handleLogoutClick() {
       this.setState({isLoggedIn: false});
     }
   
     render() {
       const isLoggedIn = this.state.isLoggedIn;
       let button;
       if (isLoggedIn) {
         button = <LogoutButton onClick={this.handleLogoutClick} />;
       } else {
         button = <LoginButton onClick={this.handleLoginClick} />;
       }
   
       return (
         <div>
           <Greeting isLoggedIn={isLoggedIn} />
           {button}
         </div>
       );
     }
   }
   
   ReactDOM.render(
     <LoginControl />,
     document.getElementById('root')
   );
   

   上面例子中先定义两个组件函数，分别为LogoutButton、LoginButton，然后LoginControl组件的实例会根据自己状态(state)中的isLogedIn的值决定是将LogoutButton实例还是LoginButton实例赋值给变量button，最后ReactDOM将LoginControl实例中的React元素解析成DOM元素，最后将DOM元素渲染。

2. 使用与运算符&&

   • true && true ==> true
   • true && false ==> false
   • false && true ==> false
   • false && false ==> false
   • true && target ==> target
   • false && target ==> false

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

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

之所以能这样做，是因为在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。

因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

3. 使用三目运算符

   另一种内联条件渲染的方法是使用 JavaScript 中的三目运算符 condition ? true : false。

   render() {
     const isLoggedIn = this.state.isLoggedIn;
     return (
       <div>
         The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
       </div>
     );
   }
   
   render() {
     const isLoggedIn = this.state.isLoggedIn;
     return (
       <div>
         {isLoggedIn
           ? <LogoutButton onClick={this.handleLogoutClick} />
           : <LoginButton onClick={this.handleLoginClick} />
         }
       </div>
     );
   }