[react] React常用的JavaScript語法 - 三元運算子

影片連結

JavaScript

適當的使用三元運算子可以幫助我們減少撰寫程式碼的行數，並增加可讀性。

下面的程式碼是去判斷 age 是否大於 24，如果結果為 true，就將 Alex 賦值給變數 name，為 false 就將 Bob 賦值給變數 name。

index.js

let age = 24;
let name = "";

if (age >= 24) {
  name = "Alex";
} else {
  name = "Bob";
}

console.log(name); // output : Alex

而我們可以使用三元運算子將上面的程式碼改寫成以下：

index.js

let age = 24;
let name = "";

age >= 24 ? (name = "Alex") : (name = "Bob");

console.log(name); // output : Alex

三元運算子的撰寫邏輯為：condition ? exprIfTrue : exprIfFalse

上面的程式碼還能在更精簡：

index.js

let age = 24;
let name = age >= 24 ? "Alex" : "Bob";

console.log(name); // output : Alex

而有時候我們並不在意條件為 false 時回傳的值為何，這時候可以使用 && 運算子，意思就是前面的條件為 true 的話，才去執行後面的程式碼。

index.js

let age = 24;
let name = age >= 24 && "Alex";

console.log(name); // output : Alex

React

我們可以使用三元運算子在 React 中判斷 jsx 或是 component 什麼時候該出現，現在點擊 Result 的按鈕，會將 showText 更改為 true，當 showText 為 true 時，就會顯示 Hello World 文字。

即時編輯器

function App() { const [showText, setShowText] = useState(false); return ( <div className="App"> <button onClick={() => setShowText(!showText)}>Toggle</button> {showText ? <p>Hello World</p> : null} </div> ); }

function App() {
  const [showText, setShowText] = useState(false);

  return (
    <div className="App">
      <button onClick={() => setShowText(!showText)}>Toggle</button>
      {showText ? <p>Hello World</p> : null}
    </div>
  );
}

結果

Loading...

即時編輯器

function App() { const [showText, setShowText] = useState(false); const SayHello = () => <h1>Hello</h1>; return ( <div className="App"> <button onClick={() => setShowText(!showText)}>Toggle</button> {showText ? <SayHello /> : null} </div> ); }

function App() {
  const [showText, setShowText] = useState(false);

  const SayHello = () => <h1>Hello</h1>;

  return (
    <div className="App">
      <button onClick={() => setShowText(!showText)}>Toggle</button>
      {showText ? <SayHello /> : null}
    </div>
  );
}

結果

Loading...

而如果不在意 false 要顯示的值為何，則可以使用&&。

即時編輯器

function App() { const [showText, setShowText] = useState(false); const SayHello = () => <h1>Hello</h1>; return ( <div className="App"> <button onClick={() => setShowText(!showText)}>Toggle</button> {showText && <SayHello />} </div> ); }

function App() {
  const [showText, setShowText] = useState(false);

  const SayHello = () => <h1>Hello</h1>;

  return (
    <div className="App">
      <button onClick={() => setShowText(!showText)}>Toggle</button>
      {showText && <SayHello />}
    </div>
  );
}

結果

Loading...