E hèm, chắc hẳn khi đọc bài viết này của mình bạn đã có được những kiến thức cơ bản của ReactJS rồi nhỉ. Hôm nay mình sẽ giới thiệu cho các bạn một số cách để thay đổi className trong ReactJS một cách ‘cool’ nhất mà mình có thể.
Chắc hẳn khi làm việc, đôi lúc bạn muốn thay đổi style của một component nào đó bằng class đã được viết sẵn trong CSS hay SCSS của project. Chẳng hạn như thêm class cho thẻ <body> ngăn việc scroll trang khi một modal được mở, đổi màu một <input/> khi click vào button,… Điều đầu tiên bạn nghĩ đến là gì, dùng tới DOM ư. Không tốt đâu, các tip dưới đây sẽ giúp bạn làm chuyện đó.
Chẳng hạn như chúng ta có một component, bên trong component đó gồm một button và một thẻ p. Bây giờ ta thử làm chức năng ẩn hiện thẻ p đó bằng cách thay đổi className của nó, mình sẽ sử dụng function component và hook để khởi tạo một component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <span class="token comment">//style</span> <span class="token punctuation">.</span>hidden <span class="token punctuation">{</span> display<span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">//component</span> <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">Component</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">//do something</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>p className<span class="token operator">=</span><span class="token string">'hidden'</span><span class="token operator">></span>Xin chào Viblo<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span><span class="token operator">></span> Click me <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> Component<span class="token punctuation">;</span> |
Giải thích một chút, thẻ p có class là hidden, class này sẽ ẩn nó đi. Nhiệm vụ của ta là khi nhấn vào button bên dưới thì sẽ ẩn hiện thẻ p kia. Chúng ta sẽ có 3 cách để thực hiện được yêu cầu trên.
1. Template strings và state
Sử dụng template strings và state là cách mà mình hay làm với trường hợp đơn giản như này. Khi click vào button ta sẽ thay đổi state của component, và khi state thay đổi câu điều kiện trong className cũng được thực hiện và đạt được những gì mà ta mong muốn
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">Component</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>hidden<span class="token punctuation">,</span> setHidden<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">setHidden</span><span class="token punctuation">(</span><span class="token operator">!</span>hidden<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>p className<span class="token operator">=</span><span class="token punctuation">{</span>hidden <span class="token operator">&&</span> <span class="token string">'hidden'</span><span class="token punctuation">}</span><span class="token operator">></span>Xin chào Viblo<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span><span class="token operator">></span> Click me <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> Component<span class="token punctuation">;</span> |
2. classnames
classnames là một package npm, nó giúp chúng ta thay đổi className một cách linh động và hỗ trợ rất nhiều trường hợp. Bây giờ mình sẽ áp dụng nó vào component bên trên nhé. Trước tiên chúng ta cần cài đặt classname vào project của mình thông qua hướng dẫn này.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> classNames <span class="token keyword">from</span> <span class="token string">'classnames'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">Component</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>hidden<span class="token punctuation">,</span> setHidden<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">setHidden</span><span class="token punctuation">(</span><span class="token operator">!</span>hidden<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>p className<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">classNames</span><span class="token punctuation">(</span><span class="token punctuation">{</span>hidden<span class="token punctuation">:</span> hidden<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span> Xin chào Viblo <span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span><span class="token operator">></span> Click me <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> Component<span class="token punctuation">;</span> |
Khi state của component là true thì thẻ p sẽ có class là hidden, ngược lại thì sẽ là một class rỗng.
Ngoài ra classnames còn hỗ trợ rất nhiều trường hợp khác nữa.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token function">classNames</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token string">'bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 'foo bar'</span> <span class="token function">classNames</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> bar<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 'foo bar'</span> <span class="token function">classNames</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token string">'foo-bar'</span><span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 'foo-bar'</span> <span class="token function">classNames</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token string">'foo-bar'</span><span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => ''</span> <span class="token function">classNames</span><span class="token punctuation">(</span><span class="token punctuation">{</span> foo<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> bar<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 'foo bar'</span> <span class="token function">classNames</span><span class="token punctuation">(</span><span class="token punctuation">{</span> foo<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> bar<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 'foo bar'</span> <span class="token comment">// lots of arguments of various types</span> <span class="token function">classNames</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> bar<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> duck<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'baz'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> quux<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => 'foo bar baz quux'</span> <span class="token comment">// other falsy values are just ignored</span> <span class="token function">classNames</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> undefined<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> baz<span class="token punctuation">:</span> <span class="token keyword">null</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
3. clsx
Cũng là một package như classnames nhưng vì có ít chức năng hơn cho nên có dung lượng nhỏ đáng kể (223Byte), đây sẽ là sự lựa chọn thích hợp cho bạn nếu như bạn chỉ cần một số chức năng cần thiết mà không muốn làm tăng kích thước của dự án. Cú pháp của nó khá giống như classnames.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> clsx <span class="token keyword">from</span> <span class="token string">'clsx'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">Component</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span>hidden<span class="token punctuation">,</span> setHidden<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">setHidden</span><span class="token punctuation">(</span><span class="token operator">!</span>hidden<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>p className<span class="token operator">=</span><span class="token punctuation">{</span><span class="token function">clsx</span><span class="token punctuation">(</span><span class="token punctuation">{</span>hidden<span class="token punctuation">:</span> hidden<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span> Xin chào Viblo <span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span><span class="token operator">></span> Click me <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> Component<span class="token punctuation">;</span> |
Vẫn còn nhiều chức năng khác của clsx, nếu như bạn muốn tìm hiểu thêm về nó hãy nhấn vào đường dẫn này. Bài chia sẻ của mình đến đây là kết thúc rồi, hẹn các bạn vào bài viết tiếp theo!