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寫在元件函式中