在 React 中，你可以創建不同的組件來封裝各種你需要的行為。然後，依據應用的不同狀態，你可以只渲染對應狀態下的部分內容。
React 中的條件渲染和 JavaScript 中的一樣，使用 JavaScript 運算符 if 或者條件運算符去創建元素來表現當前的狀態，然後讓 React 根據它們來更新 UI。
觀察這兩個組件:
function UserGreeting(props) {
return
Welcome back!
;}
function GuestGreeting(props) {
return
Please sign up.
;}
再創建一個 Greeting 組件，它會根據用戶是否登錄來決定顯示上面的哪一個組件。
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <usergreeting>;
}
return <guestgreeting>;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<greeting>,
document.getElementById('root')
);
這個示例根據 isLoggedIn 的值來渲染不同的問候語。
元素變量
你可以使用變量來儲存元素。 它可以幫助你有條件地渲染組件的一部分，而其他的渲染部分並不會因此而改變。
觀察這兩個組件，它們分別代表了註銷和登錄按鈕：
function LoginButton(props) {
return (
<button>
Login
);
}
function LogoutButton(props) {
return (
<button>
Logout
);
}
在下面的示例中，我們將創建一個名叫 LoginControl 的有狀態的組件。
它將根據當前的狀態來渲染 <loginbutton> 或者 <logoutbutton>。同時它還會渲染上一個示例中的 <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;
if (isLoggedIn) {
button = <logoutbutton>;
} else {
button = <loginbutton>;
}
return (
<greeting>
{button}
);
}
}
ReactDOM.render(
<logincontrol>,
document.getElementById('root')
);
聲明一個變量並使用 if 語句進行條件渲染是不錯的方式，但有時你可能會想使用更為簡潔的語法。接下來，我們將介紹幾種在 JSX 中內聯條件渲染的方法。
與運算符 &&
通過花括號包裹代碼，你可以在 JSX 中嵌入任何表達式。這也包括 JavaScript 中的邏輯與 (&&) 運算符。它可以很方便地進行元素的條件渲染。
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
Hello!
{unreadMessages.length > 0 &&
You have {unreadMessages.length} unread messages.
}
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<mailbox>,
document.getElementById('root')
);
之所以能這樣做，是因為在 JavaScript 中，true && expression 總是會返回 expression, 而 false && expression 總是會返回 false。
因此，如果條件是 true，&& 右側的元素就會被渲染，如果是 false，React 會忽略並跳過它。
三目運算符
另一種內聯條件渲染的方法是使用 JavaScript 中的三目運算符 condition ? true : false。
在下面這個示例中，我們用它來條件渲染一小段文本
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
The user is {isLoggedIn ? 'currently' : 'not'} logged in.
);
}
同樣的，它也可以用於較為複雜的表達式中，雖然看起來不是很直觀：
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
{isLoggedIn ? (
<logoutbutton>
) : (
<loginbutton>
)}
);
}
就像在 JavaScript 中一樣，你可以根據團隊的習慣來選擇可讀性更高的代碼風格。需要注意的是，如果條件變得過於複雜，那你應該考慮如何提取組件。
阻止組件渲染
在極少數情況下，你可能希望能隱藏組件，即使它已經被其他組件渲染。若要完成此操作，你可以讓 render 方法直接返回 null，而不進行任何渲染。
下面的示例中，<warningbanner> 會根據 prop 中 warn 的值來進行條件渲染。如果 warn的值是 false，那麼組件則不會渲染:
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
Warning!
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true};
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(state => ({
showWarning: !state.showWarning
}));
}
render() {
return (
<warningbanner>
<button>
{this.state.showWarning ? 'Hide' : 'Show'}
);
}
}
ReactDOM.render(
<page>,
document.getElementById('root')
);
在組件的 render 方法中返回 null 並不會影響組件的生命週期。例如，上面這個示例中，componentDidUpdate 依然會被調用。
經典前端面試題每日更新，歡迎參與討論，地址：https://github.com/daily-interview/fe-interview。
閱讀更多 全棧弄潮兒 的文章
關鍵字: 條件 JavaScript 渲染
