React 動態加入 CSS
2 min read
前面提到如何使用邏輯運算子來判斷顯示加號減號，這篇則是介紹其他方式，也就是使用 CSS 來動態將 HTML 元素隱藏起來。
visibility 與 display 的差異
首先，要先了解 visibility: hidden 與 display: none 這兩個的運用有什麼差異。
visibility: hidden：當隱藏元素時，原本的元素依然存在佈局中。 display: none：當隱藏元素時，該元素會在原本的佈局移除。
根據以上條件的不同，選擇使用 visibility: hidden 會是不錯的作法。
動態加入 CSS
在前面的筆記中有提到如何加入 inline-style，這邊就再加入邏輯運算子來判斷，當 count >= 10 就執行 visibility: hidden：
= 10 && "hidden"
}}
onClick={() => setCount(count + 1)}
>
+
另外當 count < 1 就執行 visibility: hidden：
setCount(count - 1)}
>
-
可以試試看 CodePen，看看效果如何：
See the Pen React counter use css by Bucky Chu (@bucky0112) on CodePen.
動態加入 class
除了動態加入 inline-style 以外，還可以動態加入 class 來顯示樣式，作法也差不多。
在 css 部份設定一個 class，並帶入樣式：
.hidden {
visibility: hidden;
}在加號減號部份加上動態 class 效果：
= 10 && 'hidden'}`}
onClick={() => setCount(count + 1)}
>
+
setCount(count - 1)}
>
-
呈現的效果是一樣的，可以在 CodePen 玩玩看：
See the Pen React counter use css class by Bucky Chu (@bucky0112) on CodePen.