前言
在React中，你可以創(chuàng)建不同的組件各自封裝你需要的東西。之后你可以只渲染其中的一部分，這取決于應(yīng)用的state（狀態(tài)）。下面就來看看詳細(xì)的介紹：
條件渲染
可以根據(jù)state的值進(jìn)行組件的條件渲染。例如：
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'));你還可以用變量去存儲(chǔ)組件，以便進(jìn)行條件篩選，使得渲染函數(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'));還可以使用短操作符來實(shí)現(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> );}這種跟更大的表達(dá)式的寫法也可以，但是不推薦，因?yàn)榇a就不是很直觀了。
render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> {isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )} </div> );}如果組件有時(shí)候需要渲染出來，而有時(shí)候不需要渲染出來，在不需要渲染的時(shí)候返回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'));總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
