在 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 is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn