React有几种方法可以做到这一点。第一种是由Tudor Iliquor提出的，它只是连接字符串。第二种方法是给予className一个Object而不是一个string。这种方式可以说是更简单，但需要您添加classnames模块。您可以使用npm install --save classnames或yarn add classnames安装它。您可以使用以下命令导入：

import classNames from 'classnames';

然后你可以按以下方式使用它：

<button className={classNames({button: true, active: this.state.active})} />

第一对花括号只是告诉react我们正在传递一个动态属性，第二对花括号只是对象的普通JavaScript语法。请注意，该对象由classNames()函数 Package 。如果我们早一点声明它，我们可以很容易地做到：

render(){
    const classes = classNames({
        button: true, // we always want this class
        active: this.state.active, // only add this class if the state says so
     });
     return (
          <button className={classes} />
     );
}

如果你正在寻找2021/2022的答案：下面是一个使用react钩子的例子，当我们点击Toggle class按钮时，它会将类名app添加到div元素中。

import React, { useState } from "react";import "./styles.css";
export default function App() {
  const [isActive, setActive] = useState("false");
  const handleToggle = () => {
    setActive(!isActive);  };
  return (
    <div className={isActive ? "app" : null}>
       <h1>Hello react</h1>
       <button onClick={handleToggle}>Toggle class</button>
    </div>
  );
}

将className="button"更改为className={'button ' + f}
用花括号括起来的表达式作为JavaScript计算，并生成一个字符串
另外请注意，当使用花括号语法时，您不必在属性值周围添加双引号""。
当你的JSX被解析时，React将生成正确的HTML属性，例如class="button red"。

你有没有尝试过，传递一个可选参数给renderManager，检查它并添加到class：

...
 renderButtons(i, f, c){
    var cssClass =  c&&c!=""? "button " + c : "button";   
    return <Button value={i} className={cssClass}  id={f} active= {this.state.active} onClick={() => this.handleClick()}/>
  }
...

类似于Davids的答案，但你也可以使用模板文字。

import { useState } from "react";
function FakeComponent() {
  const [changingClass, setChangingClass] = useState("");
  function handleToggle() {
    if (changingClass === "") {
      setChangingClass("additionalClasses");
    } else {
      setChangingClass("");
    }
  }
  return (
    <div className={`class anotherClass thirdClass ${changingClass}`}>
      <button onClick={handleToggle}></button>
    </div>
  );
}
export default FakeComponent;