組件經(jīng)常需要根據(jù)不同條件顯示不同內(nèi)容。在React中，你可以使用類似于if語句、&&和?:運(yùn)算符的JavaScript語法有條件地呈現(xiàn)JSX。

你將學(xué)到：

• 如何根據(jù)條件返回不同的JSX

• 如何有條件地包含或排除一段JSX

• 在React代碼庫中常見的條件語法快捷方式

有條件地返回JSX

假設(shè)你有一個PackingList組件，渲染多個項(xiàng)目，這些項(xiàng)目可以標(biāo)記為已打包或未打包：

function?Item({?name,?isPacked?})?{return?<li?className="item">{name}</li>;
}export?default?function?PackingList()?{return?(<section><h1>Sally?Ride's?Packing?List</h1><ul><Item?isPacked={true}?name="Space?suit"?/><Item?isPacked={true}?name="Helmet?with?a?golden?leaf"?/><Item?isPacked={false}?name="Photo?of?Tam"?/></ul></section>);
}

注意到一些Item組件的isPacked屬性被設(shè)置為true，而不是false。如果isPacked={true}，你想在已打包的項(xiàng)目中添加一個勾號（?）。

你可以使用if/else語句編寫如下：

if?(isPacked)?{return?<li?className="item">{name}??</li>;
}
return?<li?className="item">{name}</li>;

如果isPacked屬性為true，則該代碼返回一個不同的JSX樹。通過這個更改，一些項(xiàng)目在末尾會顯示一個勾號：

function?Item({?name,?isPacked?})?{if?(isPacked)?{return?<li?className="item">{name}??</li>;}return?<li?className="item">{name}</li>;
}export?default?function?PackingList()?{return?(<section><h1>Sally?Ride's?Packing?List</h1><ul><Item?isPacked={true}?name="Space?suit"?/><Item?isPacked={true}?name="Helmet?with?a?golden?leaf"?/><Item?isPacked={false}?name="Photo?of?Tam"?/></ul></section>);
}

嘗試編輯返回值，觀察結(jié)果的變化！

注意到你正在使用JavaScript的if和return語句來創(chuàng)建分支邏輯。在React中，控制流（如條件）是由JavaScript處理的。

使用null有條件地返回什么也不渲染

在某些情況下，你可能不想渲染任何東西。例如，假設(shè)你根本不想顯示已打包的項(xiàng)目。一個組件必須返回一些內(nèi)容。在這種情況下，你可以返回null：

if?(isPacked)?{return?null;
}
return?<li?className="item">{name}</li>;

如果isPacked為true，該組件將返回空值null，否則，它將返回用于渲染的JSX。

function?Item({?name,?isPacked?})?{if?(isPacked)?{return?null;}return?<li?className="item">{name}</li>;
}export?default?function?PackingList()?{return?(<section><h1>Sally?Ride's?Packing?List</h1><ul><Item?isPacked={true}?name="Space?suit"?/><Item?isPacked={true}?name="Helmet?with?a?golden?leaf"?/><Item?isPacked={false}?name="Photo?of?Tam"?/></ul></section>);
}

實(shí)際上，在組件中返回null并不常見，因?yàn)樗赡軙寚L試渲染它的開發(fā)人員感到驚訝。通常，你會有條件地在父組件的JSX中包含或排除該組件。以下是如何實(shí)現(xiàn)這一點(diǎn)！

有條件地包含JSX

在前面的示例中，你控制了組件將返回哪個（如果有的話！）JSX樹。你可能已經(jīng)注意到了渲染輸出中的一些重復(fù)：

<li?className="item">{name}??</li>

和下面這段代碼非常相似:

<li?className="item">{name}</li>

兩個條件分支都返回<li className="item">...</li>：

if?(isPacked)?{return?<li?className="item">{name}??</li>;
}
return?<li?className="item">{name}</li>;

雖然這種重復(fù)沒有害處，但它可能會使你的代碼更難維護(hù)。如果你想要改變className會怎么樣呢？你必須在代碼中的兩個地方進(jìn)行更改！在這種情況下，你可以有條件地包含一些JSX，使你的代碼更加DRY。

條件（三目）運(yùn)算符（? :)

JavaScript有一種緊湊的語法來編寫條件表達(dá)式 - 條件運(yùn)算符或“三目運(yùn)算符”。

你可以用它來代替：

if?(isPacked)?{return?<li?className="item">{name}??</li>;
}
return?<li?className="item">{name}</li>;

可以寫成這樣：

return?(<li?className="item">{isPacked???name?+?'??'?:?name}</li>
);

可以將其理解為“如果isPacked為true，則（？）呈現(xiàn)name+'?'，否則（:）呈現(xiàn)name”。

現(xiàn)在假設(shè)你想要將完成的條目文本包裝在另一個HTML標(biāo)記中，例如<del>來劃掉它。你可以添加更多的換行符和括號，這樣就可以更容易地嵌套更多的JSX在每個情況下：

function?Item({?name,?isPacked?})?{return?(<li?className="item">{isPacked???(<del>{name?+?'??'}</del>)?:?(name)}</li>);
}export?default?function?PackingList()?{return?(<section><h1>Sally?Ride's?Packing?List</h1><ul><Item?isPacked={true}?name="Space?suit"?/><Item?isPacked={true}?name="Helmet?with?a?golden?leaf"?/><Item?isPacked={false}?name="Photo?of?Tam"?/></ul></section>);
}

這種方式適用于簡單的條件，但是要適度使用。如果你的組件具有太多嵌套的條件標(biāo)記而變得混亂，請考慮提取子組件以清理代碼。在React中，標(biāo)記是代碼的一部分，因此您可以使用變量和函數(shù)等工具來整理復(fù)雜的表達(dá)式。

邏輯與（&&）運(yùn)算符

你會遇到的另一個常用的快捷方式是JavaScript的邏輯與（&&）運(yùn)算符。在React組件中，當(dāng)您希望在條件為真時呈現(xiàn)一些JSX，否則不呈現(xiàn)任何東西時，它經(jīng)常出現(xiàn)。使用&&，您可以僅在isPacked為true時有條件地呈現(xiàn)復(fù)選標(biāo)記：

return?(<li?className="item">{name}?{isPacked?&&?'?'}</li>
);

你可以理解為“如果isPacked為真，則（&&）渲染勾號，否則不渲染任何東西”。

下面是它的實(shí)現(xiàn)：

function?Item({?name,?isPacked?})?{return?(<li?className="item">{name}?{isPacked?&&?'?'}</li>);
}export?default?function?PackingList()?{return?(<section><h1>Sally?Ride's?Packing?List</h1><ul><Item?isPacked={true}?name="Space?suit"?/><Item?isPacked={true}?name="Helmet?with?a?golden?leaf"?/><Item?isPacked={false}?name="Photo?of?Tam"?/></ul></section>);
}

當(dāng) JavaScript 的 && 表達(dá)式左側(cè)（我們的條件）為 true 時，它返回右側(cè)的值（在我們的示例中，是打勾符號）。但如果條件為 false，整個表達(dá)式將變?yōu)?false。React 將 false 視為 JSX 樹中的“空洞”，就像 null 或 undefined 一樣，并在其位置上不呈現(xiàn)任何內(nèi)容。

💡 陷阱：不要將數(shù)字放在 && 的左側(cè)。

為了測試條件，JavaScript 會自動將左側(cè)轉(zhuǎn)換為布爾值。但是，如果左側(cè)是 0，則整個表達(dá)式得到的值就是 0，而 React 將愉快地呈現(xiàn) 0 而不是什么都不呈現(xiàn)。

例如，常見的錯誤是編寫類似 messageCount && <p>New messages</p> 的代碼。很容易假設(shè)當(dāng) messageCount 為 0 時，它什么也不呈現(xiàn)，但它實(shí)際上會呈現(xiàn) 0 本身！

要修復(fù)它，請將左側(cè)設(shè)置為布爾值：messageCount > 0 && <p>New messages</p>。

有條件地將 JSX 賦給變量

當(dāng)快捷方式妨礙編寫普通代碼時，請嘗試使用 if 語句和變量。您可以使用 let 定義的變量進(jìn)行重新賦值，因此首先提供您要顯示的默認(rèn)內(nèi)容，即名稱：

let?itemContent?=?name;

使用 if 語句將 JSX 表達(dá)式重新分配給 itemContent（如果 isPacked 為 true）：

if?(isPacked)?{itemContent?=?name?+?"??";
}

花括號打開了“JavaScript 的窗口”。使用花括號嵌套先前計算出的表達(dá)式，將變量嵌入返回的 JSX 樹中：

<li?className="item">{itemContent}
</li>

這種風(fēng)格最冗長，但也是最靈活的。以下是實(shí)例：

function?Item({?name,?isPacked?})?{let?itemContent?=?name;if?(isPacked)?{itemContent?=?name?+?"??";}return?(<li?className="item">{itemContent}</li>);
}export?default?function?PackingList()?{return?(<section><h1>Sally?Ride's?Packing?List</h1><ul><Item?isPacked={true}?name="Space?suit"?/><Item?isPacked={true}?name="Helmet?with?a?golden?leaf"?/><Item?isPacked={false}?name="Photo?of?Tam"?/></ul></section>);
}

與之前一樣，這不僅適用于文本，還適用于任意的 JSX。

function?Item({?name,?isPacked?})?{let?itemContent?=?name;if?(isPacked)?{itemContent?=?(<del>{name?+?"??"}</del>);}return?(<li?className="item">{itemContent}</li>);
}export?default?function?PackingList()?{return?(<section><h1>Sally?Ride's?Packing?List</h1><ul><Item?isPacked={true}?name="Space?suit"?/><Item?isPacked={true}?name="Helmet?with?a?golden?leaf"?/><Item?isPacked={false}?name="Photo?of?Tam"?/></ul></section>);
}

如果您不熟悉 JavaScript，這些樣式的多樣性可能會一開始讓您感到不知所措。然而，學(xué)習(xí)它們將有助于您閱讀和編寫任何 JavaScript 代碼，而不僅僅是 React 組件！首先選擇您喜歡的風(fēng)格，如果您忘記了其他風(fēng)格的工作方式，請再次參考此參考文獻(xiàn)。

總結(jié)

• 在 React 中，您可以使用 JavaScript 控制分支邏輯。

• 你可以使用 if 語句有條件地返回 JSX 表達(dá)式。

• 你可以使用花括號將一些 JSX 有條件地保存到變量中，然后在 JSX 中包含它。

• 在 JSX 中，{cond ? <A /> : <B />} 表示“如果 cond，則呈現(xiàn) <A />，否則呈現(xiàn) <B />”。

• 在 JSX 中，{cond && <A />} 表示“如果 cond，則呈現(xiàn) <A />，否則不呈現(xiàn)任何內(nèi)容”。

• 快捷方式很常見，但如果您喜歡普通 if，則不必使用它們。

長按關(guān)注

幫助 10W 人入門并進(jìn)階前端