如何使用 Babel 动态添加类到 React 元素？

Babel 中的动态类添加

在处理动态内容时，通常需要向元素添加其他类。在使用 Babel 的 React 应用程序中，这可以通过 className 属性来实现。

问题：

如何将动态类追加到现有类的列表中？例如，一个 className 为“wrapper searchDiv”的 React 组件需要动态更新为“wrapper searchDiv {this.state.something}”。

答案：

有两种方法可以实现此目的：

1。传统 JavaScript 方法：

使用 JavaScript 在 className 属性中添加附加类，如下所示：

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

2.字符串模板方法：

使用反引号创建字符串模板，这样可以使代码更简洁：

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

在这两种方法中，大括号中都包含 JavaScript 代码，允许修改字符串和添加动态值。但是，需要注意的是，不支持在属性中组合 JSX 字符串和大括号。

以上是如何使用 Babel 动态添加类到 React 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！