在 React 中使用多个类名

Irakli Tchigladze 2022年5月18日
在 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 值。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相关文章 - React Class