就像JS中常常會根據條件（比如if/else、switch）返回不同的值，React中也可以根據組件的狀態或其他參考條件返回不同的React Element。

比如根據用戶是否登陸渲染對應的UI面板。

 1 class LoginControl extends React.Component {
 2   constructor(props) {
 3     super(props);
 4     this.handleLoginClick = this.handleLoginClick.bind(this);
 5     this.handleLogoutClick = this.handleLogoutClick.bind(this
 
);
 6     this.state = {isLoggedIn: false};
 7   }
 8 
 9   handleLoginClick() {
10     this.setState({isLoggedIn: true});
11   }
12 
13   handleLogoutClick() {
14     this.setState({isLoggedIn: false});
15   }
16 
17   render() {
18     const isLoggedIn = this.state.isLoggedIn;
19 
20     let button = null
 
;
21     if (isLoggedIn) {
22       button = <LogoutButton onClick={this.handleLogoutClick} />;
23     } else {
24       button = <LoginButton onClick={this.handleLoginClick} />;
25     }
26 
27     return (
28       <div>
29         <Greeting isLoggedIn={isLoggedIn} />
30         {button}
 
31       </div>
32     );
33   }
34 }
35 
36 ReactDOM.render(
37   <LoginControl />,
38   document.getElementById(‘root‘)
39 );

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

該結構中，只有render函數內用JSX最終輸出React Elements。

inline-if：

可以用&&操作符 充當if,左邊為真時再執行右邊，否則跳過。

 1   return (
 2     <div>
 3       <h1>Hello!</h1>
 4       {unreadMessages.length > 0 &&
 5         <h2>
 6           You have {unreadMessages.length} unread messages.
 7         </h2>
 8       }
 9     </div>
10   );

inline-if-else:

1     <div>
2       The user is <b>{isLoggedIn ? ‘currently‘ : ‘not‘}</b> logged in.
3     </div>

當條件比較復雜時，推薦將組件的模板拆分。

隱藏組件：

當希望組件隱藏時，讓其返回null即可。不過這並不影響到生命周期函數的執行。 componentWillUpdate 和componentDidUpdate依然會被觸發哦。

 1 function WarningBanner(props) {
 2   if (!props.warn) {
 3     return null;
 4   }
 5   //...
 6   render() {
 7     return (
 8       <div>
 9         <WarningBanner warn={this.state.showWarning} />
10         <button onClick={this.handleToggleClick}>
11           {this.state.showWarning ? ‘Hide‘ : ‘Show‘}
12         </button>
13       </div>
14     );
15   //...

React:Conditional Rendering（條件渲染）