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

在 JSX 中动态添加类到手动类名

在 JSX 中，我们经常需要根据某些条件动态地为元素添加类。这需要操作 className 属性以包含静态和动态类名称。以下是实现此目的的方法：

使用 JavaScript 语法

您可以使用普通 JavaScript 语法将动态类添加到手动类名称中：

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

这会将静态类名“wrapper”和“searchDiv”与由状态属性确定的动态类名连接起来this.state.something.

使用字符串模板

或者，您可以使用带反引号的字符串模板（ES6 模板文字）：

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

此语法允许您将 JavaScript 表达式直接插入到字符串中，包括动态类

注意：

请记住，JSX 中大括号内的任何内容都会被解释为 JavaScript 代码。因此，您可以根据需要在 className 属性中执行复杂的逻辑并操作字符串。但是，您不能直接在属性中组合 JSX 字符串和大括号。

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