如何使用模板文字向 ReactJS 组件添加多个类？

使用模板文字向 ReactJS 组件添加多个类

要向 ReactJS 中的组件添加多个类，您可以使用 ES6 模板文字。此方法提供了一种简洁高效的方法，将字符串和变量组合成单个表达式。

第 1 步：定义类变量

在组件的 render 方法中，定义一个变量来存储要添加的类。例如：

此变量根据组件的状态有条件地设置“活动”类。

步骤 2：使用模板文字组合类

模板文字允许您使用反引号 (`) 创建多行字符串。在字符串中，使用 ${} 语法嵌入类变量。

此行将 'activeClass'、'data.class' 和 'main-class' 变量连接到单个字符串中。

第 3 步：分配给 className 属性

在 JSX 中元素，将“classes”变量分配给“className”属性。这会将所有类应用于元素。

单行解决方案

您可以使用单行版本将这些步骤合并到一行中:

其中 'this.state.valid' 是一个状态变量，有条件地添加 'error'上课。

以上是如何使用模板文字向 ReactJS 组件添加多个类？的详细内容。更多信息请关注PHP中文网其他相关文章！