在 React 中，你可以創(chuàng)建不同的組件來封裝各種你需要的行為。然后還可以根據(jù)應(yīng)用的狀態(tài)變化只渲染其中的一部分。

React 中的條件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或條件運算符來創(chuàng)建表示當(dāng)前狀態(tài)的元素，然后讓 React 根據(jù)它們來更新 UI。

（1）元素變量

你可以使用變量來儲存元素。它可以幫助你有條件的渲染組件的一部分，而輸出的其他部分不會更改。

if (isLoggedIn) {button = <LogoutButton onClick={this.handleLogoutClick} />;} else {button = <LoginButton onClick={this.handleLoginClick} />;}

（2）與運算符 &&

你可以通過用花括號包裹代碼在 JSX 中嵌入任何表達(dá)式 ，也包括 JavaScript 的邏輯與 &&，它可以方便地條件渲染一個元素。

<div><h1>Hello!</h1>{unreadMessages.length > 0 &&<h2>您有 {unreadMessages.length} 條未讀信息。</h2>} </div>

（3）三目運算符

條件渲染的另一種方法是使用 JavaScript 的條件運算符:

<div>{isLoggedIn ? (<LogoutButton onClick={this.handleLogoutClick} />) : (<LoginButton onClick={this.handleLoginClick} />)} </div>

（4）阻止組件渲染

在極少數(shù)情況下，你可能希望隱藏組件，即使它被其他組件渲染。讓 render 方法返回 null 而不是它的渲染結(jié)果即可實現(xiàn)。

function Banner(props) {if (!props.warn) {return null;}return (<div className="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><Banner warn={this.state.showWarning} /><button onClick={this.handleToggleClick}>{this.state.showWarning ? '隱藏' : '顯示'}</button></div>);} }ReactDOM.render(<Page />,document.getElementById('example') );

在上面的例子中， 根據(jù)屬性 warn 的值條件渲染。如果 warn 的值是 false，則組件不會渲染：

總結(jié)

以上是生活随笔為你收集整理的react 条件渲染的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。