# React Hooks - Day4

[[Day 07 - 計數器] 幫計數器設個最大最小值吧 - JSX 中條件渲染的使用](https://ithelp.ithome.com.tw/articles/10219716)

## 前情提要

在上次的分享我們學會了 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'` 的體驗會比較好。

## 補充

那可以用 `||` 嗎？

可以的話要怎麼改？

### 邏輯運算子

1. `&&`
2. `||`
3. `!`

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

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

#### 短路性質

- `false && anything` - 後面的會直接被忽略
- `true || anything` - 後面的會直接被忽略

###### tags: `Super Junior`