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

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>
);

 標記。

三元運算式 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[1]，一個邏輯運運算元“和”（也就是 &&）：

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.

---

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

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

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