前言

在React中，你可以創(chuàng)建不同的組件各自封裝你需要的東西。之后你可以只渲染其中的一部分，這取決于應(yīng)用的state（狀態(tài)）。下面就來看看詳細的介紹：

條件渲染

可以根據(jù)state的值進行組件的條件渲染。例如：

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

你還可以用變量去存儲組件，以便進行條件篩選，使得渲染函數(shù)的返回值更加清爽，例如：

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

還可以使用短操作符來實現(xiàn)條件篩選，可以用更短的代碼寫出渲染結(jié)果。例如&&來替代if，?:來替代if else, 例如：

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

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> );}

如果組件有時候需要渲染出來，而有時候不需要渲染出來，在不需要渲染的時候返回null即可。例如：

function WarningBanner(props) {  if (!props.warn) { return null; } return ( <div className="warning"> Warning! </div> );}class Page extends React.Component {  constructor(props) { super(props); this.state = {showWarning: true} this.handleToggleClick = this.handleToggleClick.bind(this); } handleToggleClick() { this.setState(prevState => ({ showWarning: !prevState.showWarning })); } render() { return ( <div> <WarningBanner warn={this.state.showWarning} /> <button onClick={this.handleToggleClick}>  {this.state.showWarning ? 'Hide' : 'Show'} </button> </div> ); }}ReactDOM.render(  <Page />, document.getElementById('root'));