深入掌握classnames

一、介紹

classNames是一個簡潔實用的JavaScript庫，用於管理CSS類名。它可以處理各種輸入類型，例如字元串、對象數組和嵌套的類名，以及忽略空和錯誤的輸入，非常適用於在React等框架中處理樣式。

二、基礎用法

classNames包含一個默認導出，可以在代碼中使用。最簡單的方式是將一個或多個字元串參數傳遞給它：

import classNames from 'classnames';

const btnClass = classNames('btn', 'btn-primary');
// btnClass = 'btn btn-primary'

上面的代碼將創建一個帶有字元串”btn”和”btn-primary”的class name，可以將其賦值給React組件的className屬性，以便應用這些類。

還可以傳遞任意數量的參數，而不僅僅是兩個：

const btnClass = classNames('btn', 'btn-primary', 'w-100', 'mt-3');
// btnClass = 'btn btn-primary w-100 mt-3'

這裡創建了四個字元串類名，並將它們合併為單個字元串。

三、對象參數

除了多個字元串參數之外，還可以傳遞一個對象參數，將其作為classNames的源。鍵是類名，值是布爾型，用於控制是否應包括該類名：

const active = true;
const btnClass = classNames('btn', {
  'btn-primary': active,
  'btn-secondary': !active,
});
// btnClass = 'btn btn-primary'

這裡的btn類名被默認包含在結果字元串中，但是會根據active變數值，通常在React組件狀態中控制的切換為btn-primary或btn-secondary。

對象參數也可以用於添加變數數量的動態類名：

const words = ['foo', 'bar', 'baz'];
const btnClass = classNames('btn', words.map(word => `btn-${word}`));
// btnClass = 'btn btn-foo btn-bar btn-baz'

對象參數可以合併多個對象，包括其他對象參數和普通的字元串參數：

const words = ['foo', 'bar', 'baz'];
const btnClass = classNames({
  'btn-primary': true,
  'btn-group': true,
}, [
  'btn', ...words.map(word => `btn-${word}`),
]);
// btnClass = 'btn-primary btn-group btn btn-foo btn-bar btn-baz'

四、嵌套的classNames

在對象參數中使用嵌套classNames非常有用，在React等框架中特別常見。例如，可以將一個組件或HTML元素的基本類與傳遞的屬性合併：

const props = { className: 'btn btn-secondary' };
const btnClass = classNames(
  'btn-primary',
  props.className,
  { active: true }
);
// btnClass = 'btn btn-secondary btn-primary active'

上面的代碼使用了嵌套的classNames，可以看到btn-secondary被保留了下來。

五、支持不同的輸入類型

classNames可以處理各種輸入類型，主要是字元串、對象和數組。還可以傳遞其他類型，例如數組對象或其他類型的對象，然後通過遞歸處理來確保最終為字元串。

例如，如果傳遞一個數組作為參數，classNames將遞歸處理數組中的每個元素：

const words = ['foo', ['bar', { baz: true }]];
const btnClass = classNames('btn', words, { active: true });
// btnClass = 'btn foo bar baz active'

上面的代碼將處理使用了一些嵌套數組和對象的簡單示例，結果字元串包含所有的class名稱。

六、忽略錯誤的輸入

classNames可以處理創建數組和對象的錯誤輸入，例如空字元串、null或undefined。這些值被自動忽略並從結果字元串中刪除，以便生成乾淨和可讀的輸出。

例如，如果傳遞一個空字元串，它將被自動忽略：

const btnClass = classNames('btn', '');
// btnClass = 'btn'

這裡沒有output任何額外的字元串，僅僅是一個簡單的’btn’。

七、結論

classList是一種非常有用的樣式管理工具，可以幫助我們管理CSS樣式的複雜性，尤其適用於React等框架。以上是有關classNames的介紹和詳細指南。希望這篇文章能夠幫助你更好地掌握它，並提高你的開發能力。