React:Conditional Rendering（条件渲染）

就像JS中常常会根据条件（比如if/else、switch）返回不同的值，React中也可以根据组件的状态或其他参考条件返回不同的React Element。

比如根据用户是否登陆渲染对应的UI面板。

 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 = null;
     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')
 );

Class: constructor(props+state+binded-handler)  + handler +render( return React Elements))

该结构中，只有render函数内用JSX最终输出React Elements。

inline-if：

可以用&&操作符 充当if,左边为真时再执行右边，否则跳过。

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

inline-if-else:

     <div>
       The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
     </div>

当条件比较复杂时，推荐将组件的模板拆分。

隐藏组件：

当希望组件隐藏时，让其返回null即可。不过这并不影响到生命周期函数的执行。 componentWillUpdate 和componentDidUpdate依然会被触发哦。

 function WarningBanner(props) {
   if (!props.warn) {
     return null;
   }
   //...
   render() {
     return (
       <div>
         <WarningBanner warn={this.state.showWarning} />
         <button onClick={this.handleToggleClick}>
           {this.state.showWarning ? 'Hide' : 'Show'}
         </button>
       </div>
     );
   //...