迹忆客 专注技术分享

React 中的 classNames 执行与 JavaScript 中的类相同的功能。它们被用来代替类，因为 class 是 React 中的保留字。

向一个组件添加多个 classNames 为我们提供了为该组件设置一些条件的空间。一个 className 用于设置样式；另一个用于设置条件。

当我们创建具有按钮的网页时，这是理想的选择。

此外，我们可能希望为组件添加额外的样式以在某些情况下覆盖原始样式。添加一个额外的 className 可以让我们顺利地做到这一点。

此外，使用多个 className 来设置样式使 CSS 文件更易于阅读、跟踪和调整，因为单个 className 可能会因过多的样式而过载。此外，在多个 CSS 类具有相似属性的情况下，我们应该为相似属性创建另一个类，以便于更正和附加组件。

让我们看看将多个 classNames 添加到组件的不同方法。

模板文字，也称为模板字符串，允许用户创建和操作用反引号括起来的多个表达式，后跟 $ 符号和花括号。

我们将创建一个按钮网页示例，显示多个 classNames 的效果，同时使用 CSS 样式。导航到我们项目文件夹的 App.js 文件并编写以下代码：

代码片段 - App.js：

import React from "react";
import "./App.css";
export default function App() {
  const [classNames, setClassNames] = React.useState(``);
  const [showRed, setShowRed] = React.useState(false);
  const [showBlue, setShowBlue] = React.useState(false);
  React.useEffect(() => {
    setClassNames(`${showRed ? "red" : ""} ${showBlue ? "blue" : ""}`);
  }, [showRed, showBlue]);
  return (
    <div>
      <button onClick={() => setShowRed(showRed => !showRed)}>
        Toggle Red
      </button>
      <button onClick={() => setShowBlue(showBlue => !showBlue)}>
        Toggle Light Blue
      </button>
      <div className={classNames}>hit me!</div>
    </div>
  );
}

当我们调用 setClassNames 函数时，模板文字对于容纳 classNames 很方便。这是我们分别设置类 red 和 blue 的地方。

然后我们将在 App.css 文件中进行一些编码：

代码片段 - App.css：

.red {
  color: red;
}.blue {
  background-color: lightblue;
  width: 50px;
}

输出：

我们使用 button onClick 事件侦听器来告诉 React 当任一按钮被点击时该做什么。当我们点击其中一个按钮时，我们可以看到一个 className 被激活，当我们点击另一个按钮时，另一个 className 被调用，并且颜色发生了变化。

React 被广泛接受的原因之一是，由于它的依赖包，它具有无限的潜在开发和调整空间。

classnames 包是我们可以用来向组件添加多个 classNames 的另一种方法。与模板文字方法相比，它可以帮助我们编写更少的代码，并且在处理两个以上的 classNames 时可以更好地应用。

创建项目文件夹后，我们将导航到仍在内部的项目文件夹并安装 classnames 包：

$ npm install classnames

然后，我们开始编码，从 App.js 文件开始。

我们使用与第一个示例相同的样式。我们不会在这里重复 CSS 片段。

代码片段 - App.js：

import React from "react";
import "./App.css";
const classNames = require("classnames");

export default function App() {
  const [showRed, setShowRed] = React.useState(false);
  const [showBlue, setShowBlue] = React.useState(false); return (
    <div>
      <button onClick={() => setShowRed(showRed => !showRed)}>
        Toggle Red
      </button>
      <button onClick={() => setShowBlue(showBlue => !showBlue)}>
        Toggle Light Blue
      </button>
      <div className={classNames({ red: showRed, blue: showBlue })}>
        hello
      </div>
    </div>
  );
}

输出：

classnames 包被应用并包装在 div 中，我们在其中为每个组件设置 classNames，然后我们使用 onClick 事件侦听器来更改每个类的状态。

当我们单击分配给类的任一按钮时，我们可以看到每个 className 被打开/关闭。

如果我们想同时对多个类应用相同的样式，我们可以使用 classnames 包和 .map 方法。 .map 方法是一个 JavaScript 函数，可帮助我们在相似元素之间传递函数。

一旦我们创建了项目文件夹，我们将导航到仍在内部的项目文件夹，我们将安装 classnames 包：

$ npm install classnames

接下来，我们开始编码；首先，使用 App.js 文件：

代码片段 - App.js：

import React from "react";
import "./App.css";
const classNames = require("classnames");

export default function App() {
  const [showRed, setShowRed] = React.useState(false);
  return (
    <div>
      {["foo", "bar", "baz"].map(buttonType => (
        <button
          className={classNames({ [`btn-${buttonType}`]: showRed })}
          onClick={() => setShowRed(showRed => !showRed)}
        >
          Button {buttonType}
        </button>
      ))}
    </div>
  );
}

在声明了我们的 classNames 之后，.map 函数将所有三个类映射到 buttonType 对象。这将使我们能够跨多个类传递相同的函数。

然后，我们的 App.css 将如下所示：

.btn-foo,
.btn-bar,
.btn-baz {
  color: red;
}

输出：

我们为所有类分配了相同的颜色，当我们切换任何按钮时，onClick 事件监听器激活了这个 CSS 函数。

在 React 中使用多个类允许我们尝试不同的组合，因此我们有不同的方法来绕过障碍。而且因为它使我们能够在一个组件中执行多种样式和条件，编码更加灵活，我们可以精确地检测错误和错误。