歡迎光臨
每天分享高質量文章

在 React 條件渲染中使用三元運算式和 “&&” | Linux 中國

React 組件可以通過多種方式決定渲染內容。你可以使用傳統的 if 陳述句或 switch 陳述句。在本文中,我們將探討一些替代方案。但要註意,如果你不小心,有些方案會帶來自己的陷阱。
— Donavon West


致謝
編譯自 | 
https://medium.freecodecamp.org/conditional-rendering-in-react-using-ternaries-and-logical-and-7807f53b6935
 
 作者 | Donavon West
 譯者 | GraveAccent ??共計翻譯:3.0 篇 貢獻時間:14 天

React 組件可以通過多種方式決定渲染內容。你可以使用傳統的 if 陳述句或 switch 陳述句。在本文中,我們將探討一些替代方案。但要註意,如果你不小心,有些方案會帶來自己的陷阱。

三元運算式 vs if/else

假設我們有一個組件被傳進來一個 name 屬性。 如果這個字串非空,我們會顯示一個問候語。否則,我們會告訴用戶他們需要登錄。

這是一個只實現瞭如上功能的無狀態函式式組件(SFC)。

  1. const MyComponent = ({ name }) => {

  2.  if (name) {

  3.    return (

  4.      <div className="hello">

  5.        Hello {name}

  6.      div>

  7.    );

  8.  }

  9.  return (

  10.    <div className="hello">

  11.      Please sign in

  12.    div>

  13.  );

  14. };

這個很簡單但是我們可以做得更好。這是使用三元運算子conditional ternary operator編寫的相同組件。

  1. const MyComponent = ({ name }) => (

  2.  <div className="hello">

  3.    {name ? `Hello ${name}` : 'Please sign in'}

  4.  div>

  5. );

請註意這段代碼與上面的例子相比是多麼簡潔。

有幾點需要註意。因為我們使用了箭頭函式的單陳述句形式,所以隱含了return 陳述句。另外,使用三元運算子允許我們省略掉重覆的 

 標記。

三元運算式 vs &&

正如您所看到的,三元運算式用於表達 if/else 條件式非常好。但是對於簡單的 if 條件式怎麼樣呢?

讓我們看另一個例子。如果 isPro(一個布林值)為真,我們將顯示一個獎盃表情符號。我們也要渲染星星的數量(如果不是 0)。我們可以這樣寫。

  1. const MyComponent = ({ name, isPro, stars}) => (

  2.  <div className="hello">

  3.    <div>

  4.      Hello {name}

  5.      {isPro ? '♨' : null}

  6.    div>

  7.    {stars ? (

  8.      <div>

  9.        Stars:{'☆'.repeat(stars)}

  10.      div>

  11.    ) : null}

  12.  div>

  13. );

請註意 else 條件傳回 null 。 這是因為三元運算式要有“否則”條件。

對於簡單的 if 條件式,我們可以使用更合適的東西:&& 運算子。這是使用 && 編寫的相同代碼。

  1. const MyComponent = ({ name, isPro, stars}) => (

  2.  <div className="hello">

  3.    <div>

  4.      Hello {name}

  5.      {isPro && '♨'}

  6.    div>

  7.    {stars && (

  8.      <div>

  9.        Stars:{'☆'.repeat(stars)}

  10.      div>

  11.    )}

  12.  div>

  13. );

沒有太多區別,但是註意我們消除了每個三元運算式最後面的 : null (else 條件式)。一切都應該像以前一樣渲染。

嘿!約翰得到了什麼?當什麼都不應該渲染時,只有一個 0。這就是我上面提到的陷阱。這裡有解釋為什麼:

根據 MDN[1],一個邏輯運算子“和”(也就是 &&):

expr1 && expr2

如果 expr1 可以被轉換成 false ,傳回 expr1;否則傳回 expr2。 如此,當與布林值一起使用時,如果兩個運算元都是 true&& 傳回 true ;否則,傳回 false

好的,在你開始拔頭髮之前,讓我為你解釋它。

在我們這個例子里, expr1 是變數 stars,它的值是 0,因為 0 是假值,0 會被傳回和渲染。看,這還不算太壞。

我會簡單地這麼寫。

如果 expr1 是假值,傳回 expr1 ,否則傳回 expr2

所以,當對非布林值使用 && 時,我們必須讓這個假值傳回 React 無法渲染的東西,比如說,false 這個值。

我們可以通過幾種方式實現這一標的。讓我們試試吧。

  1. {!!stars && (

  2.  <div>

  3.    {'☆'.repeat(stars)}

  4.  div>

  5. )}

註意 stars 前的雙感嘆運算子(!!)(呃,其實沒有雙感嘆運算子。我們只是用了感嘆運算子兩次)。

第一個感嘆運算子會強迫 stars 的值變成布林值並且進行一次“非”操作。如果 stars 是 0 ,那麼 !stars 會是 true

然後我們執行第二個操作,所以如果 stars 是 0!!stars 會是 false。正好是我們想要的。

如果你不喜歡 !!,那麼你也可以強制轉換出一個布爾數比如這樣(這種方式我覺得有點冗長)。

  1. {Boolean(stars) && (

或者只是用比較符產生一個布林值(有些人會說這樣甚至更加語意化)。

  1. {stars > 0 && (

關於字串

空字串與數字有一樣的毛病。但是因為渲染後的空字串是不可見的,所以這不是那種你很可能會去處理的難題,甚至可能不會註意到它。然而,如果你是完美主義者並且不希望 DOM 上有空字串,你應採取我們上面對數字採取的預防措施。

其它解決方案

一種可能的將來可擴展到其他變數的解決方案,是創建一個單獨的 shouldRenderStars 變數。然後你用 && 處理布林值。

  1. const shouldRenderStars = stars > 0;

  1. return (

  2.  <div>

  3.    {shouldRenderStars && (

  4.      <div>

  5.        {'☆'.repeat(stars)}

  6.      div>

  7.    )}

  8.  div>

  9. );

之後,在將來,如果業務規則要求你還需要已登錄,擁有一條狗以及喝淡啤酒,你可以改變 shouldRenderStars 的得出方式,而傳回的內容保持不變。你還可以把這個邏輯放在其它可測試的地方,並且保持渲染明晰。

  1. const shouldRenderStars =

  2.  stars > 0 && loggedIn && pet === 'dog' && beerPref === 'light`;

  1. return (

  2.  <div>

  3.    {shouldRenderStars && (

  4.      <div>

  5.        {'☆'.repeat(stars)}

  6.      div>

  7.    )}

  8.  div>

  9. );

結論

我認為你應該充分利用這種語言。對於 JavaScript,這意味著為 if/else 條件式使用三元運算式,以及為 if 條件式使用 && 運算子。

我們可以回到每處都使用三元運算子的舒適區,但你現在消化了這些知識和力量,可以繼續前進 && 取得成功了。


作者簡介:

美國運通工程博客的執行編輯 http://aexp.io 以及 @AmericanExpress 的工程總監。MyViews !== ThoseOfMyEmployer.


via: https://medium.freecodecamp.org/conditional-rendering-in-react-using-ternaries-and-logical-and-7807f53b6935

作者:Donavon West[4] 譯者:GraveAccent 校對:wxy

本文由 LCTT 原創編譯,Linux中國 榮譽推出

赞(0)

分享創造快樂