條件渲染
在 React 中溉委，你可以創(chuàng)建一個(gè)囊括所有你需要行為的特定的組件点待。然后奏路，你可以根據(jù)你的應(yīng)用的 state 只渲染它們中的一部分畴椰。
React 中的條件渲染和 JavaScript 中的條件語(yǔ)句工作方式相同。使用 JavaScript 運(yùn)算符鸽粉，比如if或條件運(yùn)算符來(lái)創(chuàng)建元素表示當(dāng)前的 state斜脂，并使 React 匹配它們來(lái)更新 UI。
考慮下面這兩個(gè)組件：
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
我們將會(huì)創(chuàng)建Greeting組件触机，根據(jù)用戶是否登陸來(lái)顯示這兩個(gè)組件中相應(yīng)的那一個(gè):
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')
);
在CodePen上試試帚戳。
這個(gè)例子根據(jù)isLoggedIn prop 的值來(lái)渲染不同的問(wèn)候語(yǔ)句玷或。
元素變量
你可以使用變量來(lái)存儲(chǔ)元素。這可以幫助你有條件的渲染組件的一部分而其余的輸出不會(huì)改變片任。
考慮下面這兩個(gè)表示注銷和登陸按鈕的新組件：
function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}
在下面這個(gè)例子中偏友，我們會(huì)創(chuàng)建一個(gè)名為LoginControl的有狀態(tài)組件。
它會(huì)根據(jù)它當(dāng)前的 state 要么渲染<LoginButton />要么渲染<LogoutButton />蚂踊。它也會(huì)渲染前面例子中的<Greeting />：
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')
);
在CodePen上試試约谈。
當(dāng)聲明一個(gè)變量并使用一個(gè)if語(yǔ)句來(lái)有條件的渲染一個(gè)組件是一種很好的方式，有時(shí)你可能想使用簡(jiǎn)化的語(yǔ)法犁钟。有幾種方式在 JSX 中內(nèi)聯(lián)條件的方式棱诱，下面詳細(xì)解釋。
使用邏輯與（&&）運(yùn)算符實(shí)現(xiàn)內(nèi)聯(lián)的 If
你可以在 JSX 中通過(guò)使用大括號(hào)包裹插入任何表達(dá)式涝动。這就包括 JavaScript 的邏輯與&&運(yùn)算符迈勋。這對(duì)有條件的包含一個(gè)元素是很方便的。
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')
);
在CodePen上試試醋粟。
這是有效的靡菇，因?yàn)樵?JavaScript 中，true && expression的取值會(huì)一直是expression米愿，同樣false && expression的取值會(huì)一直是false厦凤。
因此，如果條件是true育苟，&&后面的元素會(huì)在輸出中顯示较鼓。如果是false，React 會(huì)忽略并跳過(guò)它违柏。
使用條件運(yùn)算符實(shí)現(xiàn)內(nèi)聯(lián)的 If-Else
另一個(gè)內(nèi)聯(lián)條件渲染元素的方法是使用 JavaScript 的條件運(yùn)算符condition ? true : false博烂。
在下面的例子中，我們使用它來(lái)有條件的渲染文本的一小塊漱竖。
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
它也可以被用在更大的表達(dá)式中禽篱，盡管它不能明顯的看出發(fā)生了什么（可讀性差）。
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
就像在 JavaScript 中馍惹，基于你和你的團(tuán)隊(duì)考慮更具可讀性躺率，由你來(lái)選擇恰當(dāng)?shù)娘L(fēng)格。也不要忘了讼积，當(dāng)條件開(kāi)始變得復(fù)雜的時(shí)候肥照，這正是提取組件的好時(shí)機(jī)。
阻止組件渲染
在少數(shù)情況下勤众，你可能想要一個(gè)組件隱藏它本身舆绎，即使它已經(jīng)被另一個(gè)組件渲染了。為此我們返回null來(lái)代替它的渲染輸出们颜。
在下面的例子中吕朵，<WarningBanner />的渲染取決于名為warn的 prop 的值猎醇。如果 prop 的值是false，那么這個(gè)組件不會(huì)被渲染：
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')
);
下一步
列表和鍵
