React-[入門篇]- 條件渲染: 三元運算子 |&& |return


三元運算子(最常使用,要熟練)

解釋三元運算子

三元運算子是一種簡化的條件表達式,也被稱為條件運算符。它通常用於根據某個條件的真偽來選擇返回兩個不同的值之一
condition ? expressionIfTrue : expressionIfFalse

const age = 25;
const message = age >= 18 ? "成年人" : "未成年人";

console.log(message); // 輸出:成年人

示範1


示範2




什麼是&&條件渲染

先複習一下&&意思:

用 && 寫法進行條件渲染是一種常見的技巧,用於根據某些條件來渲染(或不渲染)特定的元素或組件。這種方法的核心思想是,如果條件成立,則渲染右邊的元素,否則不渲染:

function App() {
  const isLoggedIn = true;

  return (
    <div>
      <h1>Welcome to our website!</h1>
      {isLoggedIn && <p>You are logged in.</p>}
    </div>
  );
}

isLoggedIn 是一個布林變數,它決定了段落 <p> 是否應該渲染。當 isLoggedIn 為 true 時,<p> 將被渲染,因為 && 運算符右邊的元素(<p>)會被評估並渲染。當 isLoggedIn 為 false 時,<p> 不會被渲染,因為整個 && 運算式將為 false,並且React將跳過它。

這種方法非常實用,因為它使我能夠以一種簡潔的方式根據條件在UI中插入或省略元素。&& 寫法僅適用於簡單的條件渲染情況。如果您需要更複雜的條件渲染邏輯,則可能需要使用 if 語句或三元運算符來更明確地處理它

回到pizza的專案:

在pizza專案中有一個要判斷是否在營業中情況,我們想要的結果是:如果是在營業中的情況,就顯示我們在營業中的提示字;如果不是營業時間就不顯示,這個就可以使用簡單的&&條件渲染:


當isOpen是false就會直接return,不會渲染


上述這段就是在JS語法裡面寫入JSX語法


return



今天想利用資料中的soldout來判斷是否賣完pizza就不顯示,可以將if寫在元件函式中

#React入門







你可能感興趣的文章

關於 ASUS AiMesh 架設三兩句

關於 ASUS AiMesh 架設三兩句

Dijkstra's Algorithm

Dijkstra's Algorithm

Command Line Tool - iTerm2

Command Line Tool - iTerm2






留言討論