在 React 中使用 CLSX 有條件地應用類

使用 clsx() 將固定名稱與條件組合成 className 字串，再將字串傳給 React 元素。本指南涵蓋安裝方式，以及用來組合類別的字串、陣列和物件輸入。

CLSX 是什麼？

clsx() 是 clsx 套件提供的函式，可將傳入的類別值組合成類別名稱字串。在 React 中，將它的結果傳給 className prop。引數中的條件會決定哪些類別名稱出現在字串中；React 的渲染則是另一回事。

例如，clsx('button', { 'button-primary': primary }) 會保留基本類別，並在 primary 為真值時加入 button-primary。與冗長的字串串接運算式相比，這種寫法可能更容易看出類別如何選取。

在 React 專案中設定 CLSX

使用 npm 時，在專案中執行 npm install clsx 安裝套件；也可以使用 Yarn 執行 yarn add clsx。接著，在負責建立類別字串的元件中匯入預設匯出：

import clsx from 'clsx';

CLSX 基本用法

將固定類別名稱以字串傳入，並在物件中指定條件類別名稱。物件中的每個鍵值會在其值為真值時納入結果：

const buttonClass = clsx('btn', { 'btn-primary': primary, 'btn-disabled': disabled });

React 按鈕可以用 className={buttonClass} 套用結果。當 primary 為 true、disabled 為 false 時，類別字串會包含 btn btn-primary；兩個條件都為 false 時，則只包含 btn。若要實際停用按鈕，請另外設定按鈕的 disabled prop；CSS 類別只會選取樣式。

以下用純 JavaScript 展示相同的預期選取結果，讓產生的字串更具體。這個簡短示意不會匯入或執行 clsx 套件；元件中應使用的套件呼叫方式已在上方示範。

const primary = true;
const disabled = false;
const buttonClass = [
  'btn',
  primary && 'btn-primary',
  disabled && 'btn-disabled',
].filter(Boolean).join(' ');
console.log(buttonClass);

使用陣列與巢狀物件的進階用法

clsx() 也接受陣列和物件，因此可以將類別來源分組並合併。例如，clsx('card', { 'card-featured': isFeatured, 'card-highlighted': isHighlighted }, ['additional-class', { 'extra-class': isFeatured }]) 一定會包含 card 和 additional-class。當 isFeatured 為真值時，結果會包含 card-featured 和 extra-class；當 isHighlighted 為真值時，則會包含 card-highlighted。將產生的字串以 className={cardClass} 傳給元件即可。

效能考量

提供的資訊沒有關於 clsx() 的效能測量或佐證，因此無法據此判定這個套件是否輕量、有效率、經過最佳化，或適合用於對效能敏感的應用程式；也無法判定它是否會影響 React 重新渲染。這些資訊不足以得出任何效能結論。

結論

使用 clsx() 將靜態與條件式類別值組合成 className 字串。它接受字串、陣列和物件，讓 React 元件中的類別選取方式更容易閱讀與整理。

常見問題

1. CLSX 有什麼用途？
   clsx() 會將傳入的值組合成類別名稱字串，可傳給 React 元素的 className prop。

2. 如何在 React 專案中安裝 CLSX？
   執行 npm install clsx 或 yarn add clsx，再使用 import clsx from 'clsx'; 匯入。

3. CLSX 可以搭配陣列和物件使用嗎？
   可以。字串、陣列和物件可以組合使用；物件中的鍵值會根據其值是否為真值來納入結果。

4. CLSX 適合用於對效能敏感的應用程式嗎？
   提供的資訊沒有任何效能測量或佐證，因此無法據此判定它是否適合、體積大小如何、效率或最佳化程度如何，或是否會影響 React 重新渲染。

5. CLSX 如何提升可讀性？
   它能將固定與條件式類別值集中在一個運算式中；相較於複雜的字串串接，這種寫法可能更容易瀏覽和維護。