如何在 React JSX 上添加多个类？

【问题标题】：How to add more than one class on React JSX?如何在 React JSX 上添加多个类？
【发布时间】：2020-11-19 15:06:00
【问题描述】：

它只适用于一个类，但它不会与声明的 2 个或更多类一起编译。

function Logo() {
    return (
        <div className={logo}>
            <img src={logo} id={logo} className={logo second} alt={"..."}/>
        </div>
    );
}

错误：

  Line 21:55:  Parsing error: Unexpected token, expected "}"

  19 |     return (
  20 |         <div className={logo}>
> 21 |             <img src={logo} id={logo} className={logo second} alt={"..."}/>
     |                                                       ^
  22 |         </div>
  23 |     );
  24 | }

【问题讨论】：

它们必须是字符串。

标签： javascript css reactjs jsx webstorm

【解决方案1】：

className 属性采用单个字符串，与 HTML 中的 class 属性相同。

看起来你的两个类都存储在变量中，所以你可以像这样把它们放在一起（2个方法）：

模板字符串

<img src={logo} id={logo} className={`${logo} ${second}`} alt={"..."}/>

字符串连接

<img src={logo} id={logo} className={logo + " " + second} alt={"..."}/>

【讨论】：

事实并非如此，因为它们不是变量。我已经变成了字符串并且它起作用了。 className="logo 秒"