怎么在React條件渲染中使用三元表達式

本篇內容介紹了“怎么在React條件渲染中使用三元表達式”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

三元表達式 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>  );};

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

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

“怎么在React條件渲染中使用三元表達式”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！