在 React 中使用多个类名

在开发复杂的应用程序时，具有多个类的 HTML 元素并不罕见。如果你熟悉 HTML 和 CSS，你可能熟悉设置多个类的语法。在本文中，我们将研究在 React 中执行此操作的多种不同方法。

React 中的多个类名

大多数 React 开发人员使用 JSX，这是一种用于编写简单组件定义的特殊语法。它的语法与 HTML 非常相似，这就是为什么大多数 React 开发人员都喜欢它的原因。有一些关于设置类的本质区别。

在 HTML 中，你可能习惯于使用 class 属性设置类。由于 React 组件可以定义为类的实例，因此 Class 是保留字。因此，开发人员必须改用 className 属性。

在 JSX 中，className 属性必须设置为等于字符串。包含多个类的简单定义如下所示：

<h1 className="classOne classTwo">Hi! Try edit me</h1>

或者，可以将 className 属性设置为等于返回字符串的 JavaScript 表达式。为确保表达式被正确解释为 JavaScript 代码，你必须将它们放在大括号之间。我们来看一个例子：

const color = "white"
<h1 className={"classOne " + color }>Hi! Try edit me</h1>;

在此示例中，我们添加了一个常规字符串和一个包含在变量中的字符串值。一旦表达式被评估，我们的 className 属性将等于 'classOne white' 字符串。

我们可以通过将 + 运算符替换为 .concat() 方法来使表达式更具可读性，该方法将两个字符串合并为一个。

const color="white"    
h1 className={"classOne ".concat(color)}>Hi! Try edit me</h1>

React .join() 方法

此标准 JavaScript 方法可用于将字符串值数组转换为多个 className 值。由于它是一个 JavaScript 方法，我们需要在 JSX 中将整个表达式放在花括号之间。

默认情况下，组合的字符串值将由逗号分隔。但是，要生成有效的 className 值列表，我们需要用一个空格分隔它们。幸运的是，我们可以通过将单个空格字符串 ' ' 作为参数传递给方法来指定分隔符。下面是一个例子：

class App extends Component {
  render() {
    const arr = ["bold", "primary", "lead"]
    return (<div><p className={arr.join(" ")}>Hi! Try edit me</p></div>)
  }
}

在 playcode 上的 styles.css 文件中，我们定义了三个类：

.lead {
  font-size: 40px;
}
.bold {
  font-weight: bold;
}
.primary {
  color: white
}

执行大括号内的代码后，你可以看到应用了所有三个类。

你还可以查看源代码以验证这些类是否应用于 <p> 元素。

<div id="app">
    <div class="container black">
        <p class="bold primary lead">Hi! Try edit me</p>
    </div>
</div>

React 中的自定义函数

在 ES6 中，我们可以使用数组解构语法来创建一个优雅的自定义函数，该函数返回一个格式化的字符串，我们可以将其用作 className 值。

让我们看一下代码：

class App extends Component {
  render() {
    const classNameGenerator = (...classes)=>{
      return classes.join(" ")
    }
    return (<div className={classNameGenerator("container")}></div>)
  }
}

此函数将其参数视为数组项，然后使用 .join() 方法返回 className 值的格式化列表。

使用该函数时，你可以根据需要传递任意数量的字符串值。

React 中的条件 className

有条件地应用 className 值对于根据用户输入更改元素的外观非常有用。例如，如果你的应用程序具有深色和浅色主题，则其背景也应从浅色切换为深色。这是一个代码示例：

const lightBackground = !this.state.darkTheme ? "white" : "black"
<div className={classNameGenerator("container") + " " + lightBackground }></div>

lightBackground 变量根据 darkTheme 状态属性值分配给两个字符串之一。除了调用 classNameGenerator("") 函数，我们还使用+ 运算符来包含变量的条件值。

为了更好地演示，我们的 playcode 应用程序 包含一个按钮，用于切换 darkTheme 属性的 boolean 值。