React Hooks

[Day 07 - 計數器] 幫計數器設個最大最小值吧 - JSX 中條件渲染的使用

前情提要

在上次的分享我們學會了 JSX 以及我們的第一個 hooks：useState，而且成功的用 React 做出了一個簡單的計數器。

今天我們要用 React 中的條件渲染，來限制計數器的最大值跟最小值。

用 CSS 把元素隱藏

要把元素從畫面上隱藏有很多方法，最常見的有 display: 'none' 跟 visibility: 'hidden' 這兩種。

然而他們把元素從畫面上隱藏的方式不太一樣，我們在向上箭頭加上 style={{ display: 'none' }} ，向下箭頭則加上 style={{ visibility: 'hidden' }} 來讓他們被隱藏，並觀察其中的差異。

可以發現 display: 'none' 不會佔據畫面空間，而 visibility: 'hidden' 則會，所以會影響畫面上元素的排列。

邏輯運算子

接下來我們只要在特定條件下讓箭頭顯示 / 消失就好了。

我們知道 JSX 裡面只能寫 JavaScript 的表達式（Expression），所以不能寫 if...else 這樣的陳述句（Statement），所以就要利用邏輯運算子來達成條件判斷。

// 向上
style={{
  visibility: count >= 10 && 'hidden'
}}
// 向下
style={{
  visibility: count <= 0 && 'hidden'
}}

也可以用 className 來做到一樣的效果。

/* 先設定 CSS  */
.visibility-hidden {
  visibility: hidden;
}

// 向上的箭頭
<div
  className={`chevron chevron-up ${count >= 10 && 'visibility-hidden'}`}
  onClick={() => {
    setCount(count + 1);
  }}
/>

// 向下的箭頭
<div
  className={`chevron chevron-down ${count <= 0 && 'visibility-hidden'}`}
  onClick={() => {
    setCount(count - 1);
  }}
/>

但是其實不管是用 visibility: 'hidden' 還是 display: 'none'，他們都確確實實的在 DOM 上面，也就是說你可以在 devTools 找到它們，也可以直接修改它們的 CSS，讓他們顯示出來。

更安全的做法其實是連渲染都不要渲染。

{count < 10 && <div
  className="chevron chevron-up"
  onClick={() => {
    setCount(count + 1);
  }}
/>}
<div className="number">{count}</div>
{count > 0 && <div
  className="chevron chevron-down"
  onClick={() => {
    setCount(count - 1);
  }}
/>}

如此一來，當 count < 10 時才會有向上箭頭，count > 0 時才會有向下箭頭。

但這樣會跟用 display: none 遇到一樣的問題，元素從 DOM 上面消失了，其他元素的位置就會被影響，所以如果不是很需要避免被直接用 devTools 操作 CSS 的話，直接用 visibility: 'hidden' 的體驗會比較好。

補充

那可以用 || 嗎？

可以的話要怎麼改？

邏輯運算子

&&
||
!

用於邏輯運算，&& 和 || 用在非布林值時，可能會回傳非布林值。

var a1 =  true && true;     // t && t 回傳 true
var a2 =  true && false;    // t && f 回傳 false
var a3 = false && true;     // f && t 回傳 false
var a4 = false && (3 == 4); // f && f 回傳 false
var a5 = "Cat" && "Dog";    // t && t 回傳 Dog
var a6 = false && "Cat";    // f && t 回傳 false
var a7 = "Cat" && false;    // t && f 回傳 false

var o1 =  true || true;     // t || t 回傳 true
var o2 = false || true;     // f || t 回傳 true
var o3 =  true || false;    // t || f 回傳 true
var o4 = false || (3 == 4); // f || f 回傳 false
var o5 = 'Cat' || 'Dog';    // t || t 回傳 Cat
var o6 = false || 'Cat';    // f || t 回傳 Cat
var o7 = 'Cat' || false;    // t || f 回傳 Cat

var n1 = !true;  // !t 回傳 false
var n2 = !false; // !f 回傳 true
var n3 = !'Cat'; // !t 回傳 false