React 动态添加多个类名：简单指南

在 React 中，可以使用模板字符串的方式动态给元素增加多个类名。具体步骤如下：\n\n1. 创建一个变量，该变量包含要添加的类名。可以是一个字符串，也可以是一个数组。\n2. 在 JSX 中，使用模板字符串的方式将变量添加到元素的className属性中。\n\n以下是一个示例代码：\n\njsx\nimport React from 'react';\n\nfunction MyComponent() {\n const classNames = 'class1 class2 class3'; // 类名字符串\n // const classNames = ['class1', 'class2', 'class3']; // 类名数组\n\n return (\n <div className={`my-element ${classNames}`}>\n {/* 其他内容 */}\n </div>\n );\n}\n\nexport default MyComponent;\n\n\n在上面的示例中，classNames变量是一个包含多个类名的字符串。在className属性中使用模板字符串的方式，将my-element类名和classNames变量拼接在一起。最终，生成的className将会是my-element class1 class2 class3。\n\n如果classNames是一个数组，可以使用数组的join方法将多个类名拼接成一个字符串，然后将该字符串添加到className中：\n\njsx\nimport React from 'react';\n\nfunction MyComponent() {\n const classNames = ['class1', 'class2', 'class3']; // 类名数组\n\n return (\n <div className={`my-element ${classNames.join(' ')}`}>\n {/* 其他内容 */}\n </div>\n );\n}\n\nexport default MyComponent;\n\n\n在上面的示例中，classNames.join(' ')将数组中的类名用空格拼接成一个字符串，然后将该字符串添加到className中。最终，生成的className将会是my-element class1 class2 class3。