如何在JSX中动态添加和管理类名？

动态增强 JSX 中的类名称

在 JSX 中，动态增强类名称可能具有挑战性。一个常见的要求是添加基于状态或道具的条件类。以下是实现此目的的方法：

选项 1：JavaScript 连接

<div className={'wrapper searchDiv ' + this.state.something}>
  ...
</div>

此方法利用 JavaScript 连接将动态类添加到现有类列表中。

选项 2：字符串模板文字

<div className={`wrapper searchDiv ${this.state.something}`}>
  ...
</div>

字符串模板文字（反引号）为构造动态类名提供了更清晰的语法。它们允许您使用 ${} 在字符串中嵌入表达式。

注释：

• 记住，JSX 属性被视为 JavaScript 代码，因此您可以执行大括号内的 JavaScript。
• 但是，在属性内组合 JSX 字符串和大括号并不支持。
• JavaScript 连接和字符串模板文字都为 JSX 中的动态类名操作提供了可行的解决方案。

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