React 中, 能夠建立封裝你須要行爲的獨特組件。然而,依賴應用可以的狀態只能渲染他們中的一部分。javascript
React 條件渲染的運做方式和 JavaScript 中條件分支結構的運做方式相同。使用 JavaScript 條件操做,例如 if 或者
[conditional operator]() 來建立顯示當前狀態的元素,讓 React 更新 UI 來匹配他們。java
思考以下兩種組件。express
function UserGreeting(props) { return <h1>Welcome back!</h1>; } function GuestGreeting(props) { return <h1>Please sign up.</h1>; }
Greeting 組件顯示依賴於用戶是否登陸。ide
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') );
[在線嘗試]()this
這個例子依賴於 isLoggedIn prop 的值來渲染不一樣的內容。code
使用 變量存 elements. 這能夠經過條件判斷渲染組件的部份內容同事其餘部分不變。component
思考這兩個新組件顯示 登入登出 按鈕ip
function LoginButton(props) { return ( <button onClick={props.onClick}> Login </button> ); } function LogoutButton(props) { return ( <button onClick={props.onClick}> Logout </button> ); }
下面咱們建立一個 [狀態化組件]() 稱爲 LoginControl.element
它會根據當前的 state 渲染 <LoginButton /> 或<LogoutButton />中的一種。同時渲染 <Greeting />**:get
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 = <LoginButtong onClick={this.handleLoginClick} />; } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> ); } } ReactDOM.render( <LoginControl />, document.getElementById('root'); );
[在線嘗試]()
當聲明一個變量使用 if聲明是一個好方法來條件話渲染一個組件,有時你可能想要使用更短的預發。
JSX 中行內條件判斷的一些方法,下文解釋。
經過包裹僅花括號的方式能夠在[JSX 中嵌入任何表達式]()。這包括 JavaScript 中的 邏輯 && 操做符。這使得根據條件判斷是否包含某操做符變得很便利:
function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You hava {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 會忽略並跳過它。
另外一個條件化行內渲染元素的方法是使用 JavaScript 的條件操做符 codition ? true : false(三目運算)。
下面的例子,咱們使用它來條件話渲染一個小的文本塊。
render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> </div> ); }
固然也能夠用來更大的表達式,雖然可讀性有些降低:
render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> {isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )} </div> ); }
就像 JavaScript 中,選擇合適的風格基於你和你的團隊如何看待更具可讀性。不管什麼時候條件變得太複雜,多是一個好的時機來 [提取組件]()。
特別狀況下可能須要隱藏一個組件,即便它被另外一個組件渲染了。返回 null 代替它的渲染輸出便可。
下面的例子中,<WarningBanner /> 渲染結果依賴 prop稱爲 warn 的 prop 的值。若是值是 false, 那麼組件不渲染:
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') );
[在線嘗試]()
組件的 render 方法返回 null 不影響觸發組件的聲明週期方法。例如 componentDidUpdate 仍然會被調用。