向 React 组件添加多个类名

Oluwafisayo Oluwatayo 2023年1月30日 2022年7月18日
  1. 使用 Template Literals 方法将多个 classNames 添加到 React 组件
  2. 使用 classnames 包添加多个 classNames 到 React 组件
  3. 使用 classnames 包和 .map 方法将多个 classNames 添加到 React 组件
  4. 结论
向 React 组件添加多个类名

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

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

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

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

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

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

使用 Template Literals 方法将多个 classNames 添加到 React 组件

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

我们将创建一个按钮网页示例,显示多个 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 很方便。这是我们分别设置类 redblue 的地方。

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

代码片段 - App.css

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

输出:

使用模板文字输出添加多个类名

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

使用 classnames 包添加多个 classNames 到 React 组件

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 方法将多个 classNames 添加到 React 组件

如果我们想同时对多个类应用相同的样式,我们可以使用 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 中使用多个类允许我们尝试不同的组合,因此我们有不同的方法来绕过障碍。而且因为它使我们能够在一个组件中执行多种样式和条件,编码更加灵活,我们可以精确地检测错误和错误。

Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn

相关文章 - React Component