在 React 條件渲染中使用三元表達式和 「&&」
React 組件可以通過多種方式決定渲染內容。你可以使用傳統的 if
語句或 switch
語句。在本文中,我們將探討一些替代方案。但要注意,如果你不小心,有些方案會帶來自己的陷阱。
三元表達式 vs if/else
假設我們有一個組件被傳進來一個 name
屬性。 如果這個字元串非空,我們會顯示一個問候語。否則,我們會告訴用戶他們需要登錄。
這是一個只實現了如上功能的無狀態函數式組件(SFC)。
const MyComponent = ({ name }) => {
if (name) {
return (
<div className="hello">
Hello {name}
</div>
);
}
return (
<div className="hello">
Please sign in
</div>
);
};
這個很簡單但是我們可以做得更好。這是使用 三元運算符 編寫的相同組件。
const MyComponent = ({ name }) => (
<div className="hello">
{name ? `Hello ${name}` : 'Please sign in'}
</div>
);
請注意這段代碼與上面的例子相比是多麼簡潔。
有幾點需要注意。因為我們使用了箭頭函數的單語句形式,所以隱含了return
語句。另外,使用三元運算符允許我們省略掉重複的 <div className="hello">
標記。
三元表達式 vs &&
正如您所看到的,三元表達式用於表達 if
/else
條件式非常好。但是對於簡單的 if
條件式怎麼樣呢?
讓我們看另一個例子。如果 isPro
(一個布爾值)為真,我們將顯示一個獎盃表情符號。我們也要渲染星星的數量(如果不是 0)。我們可以這樣寫。
const MyComponent = ({ name, isPro, stars}) => (
<div className="hello">
<div>
Hello {name}
{isPro ? '♨' : null}
</div>
{stars ? (
<div>
Stars:{'☆'.repeat(stars)}
</div>
) : null}
</div>
);
請注意 else
條件返回 null
。 這是因為三元表達式要有「否則」條件。
對於簡單的 if
條件式,我們可以使用更合適的東西:&&
運算符。這是使用 &&
編寫的相同代碼。
const MyComponent = ({ name, isPro, stars}) => (
<div className="hello">
<div>
Hello {name}
{isPro && '♨'}
</div>
{stars && (
<div>
Stars:{'☆'.repeat(stars)}
</div>
)}
</div>
);
沒有太多區別,但是注意我們消除了每個三元表達式最後面的 : null
(else
條件式)。一切都應該像以前一樣渲染。
嘿!約翰得到了什麼?當什麼都不應該渲染時,只有一個 0
。這就是我上面提到的陷阱。這裡有解釋為什麼:
根據 MDN,一個邏輯運算符「和」(也就是 &&
):
expr1 && expr2
如果
expr1
可以被轉換成false
,返回expr1
;否則返回expr2
。 如此,當與布爾值一起使用時,如果兩個操作數都是true
,&&
返回true
;否則,返回false
。
好的,在你開始拔頭髮之前,讓我為你解釋它。
在我們這個例子里, expr1
是變數 stars
,它的值是 0
,因為 0 是假值,0
會被返回和渲染。看,這還不算太壞。
我會簡單地這麼寫。
如果
expr1
是假值,返回expr1
,否則返回expr2
。
所以,當對非布爾值使用 &&
時,我們必須讓這個假值返回 React 無法渲染的東西,比如說,false
這個值。
我們可以通過幾種方式實現這一目標。讓我們試試吧。
{!!stars && (
<div>
{'☆'.repeat(stars)}
</div>
)}
注意 stars
前的雙感嘆操作符(!!
)(呃,其實沒有雙感嘆操作符。我們只是用了感嘆操作符兩次)。
第一個感嘆操作符會強迫 stars
的值變成布爾值並且進行一次「非」操作。如果 stars
是 0
,那麼 !stars
會是 true
。
然後我們執行第二個非
操作,所以如果 stars
是 0
,!!stars
會是 false
。正好是我們想要的。
如果你不喜歡 !!
,那麼你也可以強制轉換出一個布爾數比如這樣(這種方式我覺得有點冗長)。
{Boolean(stars) && (
或者只是用比較符產生一個布爾值(有些人會說這樣甚至更加語義化)。
{stars > 0 && (
關於字元串
空字元串與數字有一樣的毛病。但是因為渲染後的空字元串是不可見的,所以這不是那種你很可能會去處理的難題,甚至可能不會注意到它。然而,如果你是完美主義者並且不希望 DOM 上有空字元串,你應採取我們上面對數字採取的預防措施。
其它解決方案
一種可能的將來可擴展到其他變數的解決方案,是創建一個單獨的 shouldRenderStars
變數。然後你用 &&
處理布爾值。
const shouldRenderStars = stars > 0;
return (
<div>
{shouldRenderStars && (
<div>
{'☆'.repeat(stars)}
</div>
)}
</div>
);
之後,在將來,如果業務規則要求你還需要已登錄,擁有一條狗以及喝淡啤酒,你可以改變 shouldRenderStars
的得出方式,而返回的內容保持不變。你還可以把這個邏輯放在其它可測試的地方,並且保持渲染明晰。
const shouldRenderStars =
stars > 0 && loggedIn && pet === 'dog' && beerPref === 'light`;
return (
<div>
{shouldRenderStars && (
<div>
{'☆'.repeat(stars)}
</div>
)}
</div>
);
結論
我認為你應該充分利用這種語言。對於 JavaScript,這意味著為 if/else
條件式使用三元表達式,以及為 if
條件式使用 &&
操作符。
我們可以回到每處都使用三元運算符的舒適區,但你現在消化了這些知識和力量,可以繼續前進 &&
取得成功了。
作者簡介:
美國運通工程博客的執行編輯 http://aexp.io 以及 @AmericanExpress 的工程總監。MyViews !== ThoseOfMyEmployer.
作者:Donavon West 譯者:GraveAccent 校對:wxy
本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive