JSX 类名多个

在 React 中，我们可以使用 JSX 语法来创建 UI 组件，其中可以使用 class 或 className 属性来设置 CSS 类名。有时候我们需要同时在一个组件上添加多个 CSS 类名，本文将介绍如何在 JSX 中添加多个类名。

添加多个类名

在 JSX 中，我们可以使用数组来添加多个类名。具体方法如下所示：

<div class={['class1', 'class2'].join(' ')}></div>

上述代码中，我们先把要添加的类名放到一个数组中，这里我们添加了 class1 和 class2 两个类名。然后使用 join 方法将数组中的类名用空格分隔开，并把拼接后的字符串作为 class 的属性值传递给组件。

另一种添加多个类名的方式是使用模板字符串和条件运算符：

<div className={`default ${condition ? 'class1' : 'class2'}`}></div>

上述代码中，我们使用模板字符串将多个类名连接在一起，同时使用条件运算符根据某个条件来确定添加哪一个类名。

结语

以上是在 JSX 中添加多个类名的两种方法。通过数组和条件运算符，我们可以为组件添加任意数量的 CSS 类名，从而更加方便地控制组件的样式。