如何在 JSX 中将动态类添加到静态类名？

向手动类名添加动态类

在 Babel 基于 JavaScript 的 JSX 上下文中，您可能会遇到需要附加动态类的情况。类到现有类的列表。以下是实现此目标的方法：

两种主要方法：

传统 JavaScript：

className={'wrapper searchDiv ' + this.state.something}

此方法结合了常规字符串连接以附加动态类name.

字符串模板版本：

className={`wrapper searchDiv ${this.state.something}`}

这里，反引号用于创建允许 JavaScript 表达式插值的字符串模板。

JSX 具体注意事项：

在 JSX 中，Curly方括号括住 JavaScript 代码，因此其中的任何内容都将被执行。然而，当将 JSX 字符串与属性的大括号组合时，会出现一个警告。

替代方案：

或者，您可以利用 Babel 的 transform-class-properties 插件来启用类属性分配的形式为：

class MyComponent {
  classes = 'wrapper searchDiv ' + this.state.something;
}

以上是如何在 JSX 中将动态类添加到静态类名？的详细内容。更多信息请关注PHP中文网其他相关文章！