您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“怎么在React條件渲染中使用三元表達(dá)式”的有關(guān)知識,在實(shí)際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
假設(shè)我們有一個組件被傳進(jìn)來一個 name
屬性。 如果這個字符串非空,我們會顯示一個問候語。否則,我們會告訴用戶他們需要登錄。
這是一個只實(shí)現(xiàn)了如上功能的無狀態(tài)函數(shù)式組件(SFC)。
const MyComponent = ({ name }) => { if (name) { return ( <div className="hello"> Hello {name} </div> ); } return ( <div className="hello"> Please sign in </div> );};
這個很簡單但是我們可以做得更好。這是使用三元運(yùn)算符編寫的相同組件。
const MyComponent = ({ name }) => ( <div className="hello"> {name ? `Hello ${name}` : 'Please sign in'} </div>);
請注意這段代碼與上面的例子相比是多么簡潔。
有幾點(diǎn)需要注意。因?yàn)槲覀兪褂昧思^函數(shù)的單語句形式,所以隱含了return
語句。另外,使用三元運(yùn)算符允許我們省略掉重復(fù)的 <div className="hello">
標(biāo)記。
正如您所看到的,三元表達(dá)式用于表達(dá) if
/else
條件式非常好。但是對于簡單的 if
條件式怎么樣呢?
讓我們看另一個例子。如果 isPro
(一個布爾值)為真,我們將顯示一個獎杯表情符號。我們也要渲染星星的數(shù)量(如果不是 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
。 這是因?yàn)槿磉_(dá)式要有“否則”條件。
對于簡單的 if
條件式,我們可以使用更合適的東西:&&
運(yùn)算符。這是使用 &&
編寫的相同代碼。
const MyComponent = ({ name, isPro, stars}) => ( <div className="hello"> <div> Hello {name} {isPro && '?'} </div> {stars && ( <div> Stars:{'☆'.repeat(stars)} </div> )} </div>);
沒有太多區(qū)別,但是注意我們消除了每個三元表達(dá)式***面的 : null
(else
條件式)。一切都應(yīng)該像以前一樣渲染。
嘿!約翰得到了什么?當(dāng)什么都不應(yīng)該渲染時,只有一個 0
。這就是我上面提到的陷阱。這里有解釋為什么:
根據(jù) MDN,一個邏輯運(yùn)算符“和”(也就是 &&
):
expr1 && expr2
如果
expr1
可以被轉(zhuǎn)換成false
,返回expr1
;否則返回expr2
。 如此,當(dāng)與布爾值一起使用時,如果兩個操作數(shù)都是true
,&&
返回true
;否則,返回false
。
好的,在你開始拔頭發(fā)之前,讓我為你解釋它。
在我們這個例子里, expr1
是變量 stars
,它的值是 0
,因?yàn)?0 是假值,0
會被返回和渲染???,這還不算太壞。
我會簡單地這么寫。
如果
expr1
是假值,返回expr1
,否則返回expr2
。
所以,當(dāng)對非布爾值使用 &&
時,我們必須讓這個假值返回 React 無法渲染的東西,比如說,false
這個值。
我們可以通過幾種方式實(shí)現(xiàn)這一目標(biāo)。讓我們試試吧。
{!!stars && ( <div> {'☆'.repeat(stars)} </div>)}
注意 stars
前的雙感嘆操作符(!!
)(呃,其實(shí)沒有雙感嘆操作符。我們只是用了感嘆操作符兩次)。
***個感嘆操作符會強(qiáng)迫 stars
的值變成布爾值并且進(jìn)行一次“非”操作。如果 stars
是 0
,那么 !stars
會是 true
。
然后我們執(zhí)行第二個非
操作,所以如果 stars
是 0
,!!stars
會是 false
。正好是我們想要的。
如果你不喜歡 !!
,那么你也可以強(qiáng)制轉(zhuǎn)換出一個布爾數(shù)比如這樣(這種方式我覺得有點(diǎn)冗長)。
{Boolean(stars) && (
或者只是用比較符產(chǎn)生一個布爾值(有些人會說這樣甚至更加語義化)。
{stars > 0 && (
空字符串與數(shù)字有一樣的毛病。但是因?yàn)殇秩竞蟮目兆址遣豢梢姷?,所以這不是那種你很可能會去處理的難題,甚至可能不會注意到它。然而,如果你是***主義者并且不希望 DOM 上有空字符串,你應(yīng)采取我們上面對數(shù)字采取的預(yù)防措施。
一種可能的將來可擴(kuò)展到其他變量的解決方案,是創(chuàng)建一個單獨(dú)的 shouldRenderStars
變量。然后你用 &&
處理布爾值。
const shouldRenderStars = stars > 0;
return ( <div> {shouldRenderStars && ( <div> {'☆'.repeat(stars)} </div> )} </div>);
之后,在將來,如果業(yè)務(wù)規(guī)則要求你還需要已登錄,擁有一條狗以及喝淡啤酒,你可以改變 shouldRenderStars
的得出方式,而返回的內(nèi)容保持不變。你還可以把這個邏輯放在其它可測試的地方,并且保持渲染明晰。
const shouldRenderStars = stars > 0 && loggedIn && pet === 'dog' && beerPref === 'light`;
return ( <div> {shouldRenderStars && ( <div> {'☆'.repeat(stars)} </div> )} </div>);
“怎么在React條件渲染中使用三元表達(dá)式”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。