React開發利器深入解析classnames庫：優雅管理動態CSS類

言

在React應用程序中，動態地管理CSS類是一個常見且重要的任務。無論是根據組件狀態切換樣式，還是根據用戶輸入調整界面外觀，都能夠極大地提升應用的交互性和用戶體驗。然而，手動拼接字符串來構建類名不僅繁瑣，還容易出錯。幸運的是，classnames庫為我們提供了一個簡潔而強大的解決方案。本文將深入探討classnames的使用方法，解析其內部原理，并通過示例代碼展示其在React項目中的應用。

什么是classnames？

classnames是一個輕量級的JavaScript庫，用于條件性地組合多個CSS類名。它支持布爾值、字符串數組和對象作為參數，能夠智能地過濾掉無效或不需要的類名，從而生成干凈、正確的類名字符串。classnames的靈活性和易用性使其成為了React項目中處理動態類名的理想選擇。

安裝與導入

在React項目中使用classnames之前，首先需要將其安裝到項目依賴中：

npm install classnames

或者使用Yarn：

yarn add classnames

接著，在需要使用classnames的組件中導入它：

import classNames from 'classnames';

使用示例

classnames的使用非常直觀，它接受多種類型的參數，并返回一個包含所需類名的字符串。下面是一些典型的使用場景：

布爾值：根據條件添加或移除類名。

const isActive = true;
const className = classNames('button', { active: isActive });

字符串數組：合并多個類名。

const className = classNames(['button', 'primary']);

對象：根據鍵值對添加類名。

const className = classNames({
  'button': true,
  'active': isActive,
  'primary': isPrimary
});

源碼解析

classnames的源碼雖然簡潔，但其實現卻頗為巧妙。其核心邏輯在于遍歷傳入的參數，根據參數類型和值過濾和組合類名。下面是一個簡化的源碼示例，展示了classnames如何處理不同類型的數據

function classNames(...args) {
  const classes = [];

  args.forEach(arg => {
    if (!arg) return;
    if (typeof arg === 'string' || typeof arg === 'number') {
      classes.push(arg);
    } else if (Array.isArray(arg)) {
      classes.push(classNames(...arg));
    } else if (typeof arg === 'object') {
      Object.keys(arg).forEach(key => {
        if (arg[key]) {
          classes.push(key);
        }
      });
    }
  });

  return classes.join(' ');
}

結語

通過本文的介紹，你不僅學會了如何在React項目中優雅地使用classnames庫來管理動態CSS類，還深入了解了其背后的實現原理。classnames不僅簡化了代碼，提高了開發效率，還確保了樣式的正確性和一致性。在構建復雜和高度定制化的React應用時，掌握classnames的使用將是提升項目質量和開發體驗的重要一環。

附錄：實戰應用

在React組件中，你可能會遇到需要根據組件的多個狀態動態改變類名的情況。例如，一個按鈕組件可能需要根據激活狀態、是否為主按鈕以及是否有錯誤狀態來決定其類名：

import React from 'react';
import classNames from 'classnames';

function Button({ active, primary, error, children }) {
  const className = classNames({
    button: true,
    active: active,
    primary: primary,
    'error-button': error
  });

  return (
    <button className={className}>
      {children}
    </button>
  );
}

export default Button;

通過使用classnames，上述代碼清晰地展示了如何根據組件的不同狀態動態生成類名，從而實現樣式的變化。這種方法不僅保持了代碼的整潔，還使得樣式的調整變得更加直觀和易于維護。

#頭條創作挑戰賽#

lass和 ID 選擇器

我們之前給一個段落中添加斜體的標識的時候我們會在CSS里面這樣做，這次我們將學習使用ID選擇器來實現這項功能

我們在之前的代碼中給標簽添加id

 <p id="author">
          <strong>勞拉·瓊斯 (Laura Jones)</strong> 于 2027 年 6 月 21
          日星期一發布
        </p>

CSS代碼是這樣的，相信你能明白這是什么意思，相當于給這個段落起名字一樣

#author {
  font-style: italic;
  font-size: 18px;
}

相同的道理，我們給版權信息也用這種方法去寫；如下所示：

    <footer><p id="copyright">版權所有 ? 2027 sbz</p></footer>

類選擇器

除了id選擇器，還有類選擇器。那么這兩個選擇器有什么區別呢？id選擇器不允許id名字有相同的，而類選擇器可以多種元素使用同一個這樣的選擇器。
舉個例子，我們現在將下方的幾個作者添加同樣的類選擇器

        <li>
          <img
            src="img/related-1.jpg"
            alt="related-1"
            width="75px"
            height="75px"
          /><a href="#">如何去學習網頁開發</a>
          <p class="related-author">作者：喬納斯·施梅德特曼</p>
        </li>
        <li>
          <img
            src="img/related-2.jpg"
            alt="related-2"
            width="75px"
            height="75px"
          />
          <a href="#">CSS 的未知力量</a>
          <p class="related-author">作者：吉姆.狄龍</p>
        </li>
        <li>
          <img
            src="img/related-3.jpg"
            alt="related-3"
            width="75px"
            height="75px"
          />
          <a href="#">為什么 JavaScript 很棒</a>
          <p class="related-author">作者：瑪蒂爾達</p>
        </li>

在CSS上，我們這樣寫

.related-author {
  font-size: 18px;
  font-weight: bold;
}

如上圖所示，這些無序列表的黑點看上去實在難看，如何將它去除呢？如下

ul {
  list-style: none;
}

但是如果html中有多個無序列表，這個時候我們就需要使用類選擇器去做這件事情了

HTML代碼如下：

<ul class="related">
        <li>
          <img
            src="img/related-1.jpg"
            alt="related-1"
            width="75px"
            height="75px"
          /><a href="#">如何去學習網頁開發</a>
          <p class="related-author">作者：喬納斯·施梅德特曼</p>
        </li>
        <li>
          <img
            src="img/related-2.jpg"
            alt="related-2"
            width="75px"
            height="75px"
          />
          <a href="#">CSS 的未知力量</a>
          <p class="related-author">作者：吉姆.狄龍</p>
        </li>
        <li>
          <img
            src="img/related-3.jpg"
            alt="related-3"
            width="75px"
            height="75px"
          />
          <a href="#">為什么 JavaScript 很棒</a>
          <p class="related-author">作者：瑪蒂爾達</p>
        </li>
      </ul>

CSS代碼如下：

.related {
  list-style: none;
}

疑問：為啥上面的不用id選擇器，而是用class呢？
因為當我們不止一個元素需要使用CSS樣式的時候，我們通常都會選擇類選擇器

注：在實際的生活中，我們都會使用類選擇器，因為在id選擇器只能使用一次，如果你后續使用同樣的css樣式會增加你的代碼量，所以即使是一個CSS，也建議使用類選擇器，而不是id選擇器。

avascript ES5 定義類（class）的三種方法

一、構造函數法

function Dog() {
    this.name = '大黃';
    this.call = function call() {
        console.log('汪汪');
    }
}
Dog.age = 10;
Dog.prototype.eat = function () {
    console.log('吃狗糧');
}
var dog1 = new Dog();
dog1.call()
dog1.eat()

二、Object.create()

const dog = {
    name: '大黃',
    call:function(){
        console.log('汪汪');
    }
}
const dog1 = Object.create(dog);
dog1.call();

三、極簡主義法

var Dog = {
    create:function(){
        var dog = {};
        dog.name = '大黃';
        dog.call = function(){
            console.log('汪汪');
        }
        return dog;
    }
}
var dog1 = Dog.create();
dog1.call();

ES6 定義類

使用 class 關鍵字來聲明類。

class Person {
    constructor(name,age){
        this.name = name;
        this.age = age
    }
}
let user = new Person('張三',22);
console.log(user);

constructor 構造函數用于創建和初始化一個類

class Person {
    // 私有變量
    #_life = '';

    // 構造函數
    constructor(name, age, sex, life) {
        this.name = name;
        this.age = age;
        // 約定命名 通過在變量名稱前加一個下劃線來定義私有變量，實際上外部可以直接訪問
        this._sex = sex;
        // #作為前綴 定義私有作用域，外部無法直接訪問
        this.#_life = life;
    }

    // Getter
    get getName() {
        return this.name
    }

    // Setter
    set setName(name) {
        this.name = name;
    }

    get sex() {
        return this._sex;
    }

    get life() {
        return `${this.#_life}年`
    }

    // 方法
    sayHi() {
        console.log(`hello,我是${this.name}`);
    }

    // 靜態方法 該方法不會被實例繼承，而是直接通過類來調用
    static eat(food) {
        console.log(`吃了${food}`);
    }

    // 私有方法
    _a() {
        console.log('約定命名的私有方法');
    }

    #_sleep() {
        console.log(`${this.name}睡著了`);
    }

    sleep(){
        this.#_sleep()
    }
}

function a() {
    console.log(`${this.name}睡著了`);
}

let user = new Person('張三', 22, '男', 99);
console.log(user);
console.log(user.getName);
user.name = '王五'
console.log(user.name);
user.sayHi()
Person.eat('蘋果')
user._a()
// user.#__sleep() // 無法調用
user.sleep()
console.log(user.sex);
console.log(user.life);

繼承

在線咨詢

上一篇：HTML 音頻(Audio)
下一篇：Python使用Dash開發網頁應用（二）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商