getBadgeClasses() {
    let classes = "badge m-2 ";
    classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
    return classes;
}

<span className={this.getBadgeClasses()}>Total Count</span>

const ClassToggleFC= () =>{
  
  const [isClass, setClass] = useState(false);

  const toggle =() => {
       setClass( prevState => !prevState)
  }
  
  return(
      <>
        <h1 className={ isClass ? "heading" : ""}> Hiii There </h1>
       <button onClick={toggle}>Toggle</button>
      </>
   )

}

我只是简单地创建了一个功能组件。在里面，我采取一个状态，并设置初始值为false..

我有一个按钮切换状态..

每当我们改变状态渲染组件时，如果状态值(isClass)为假，h1的className应该是""如果状态值(isClass)为真，h1的className应该是"heading"

[2022年4月21日更新:在反撇号之前和之后添加花括号以防止错误]

您可以简单地使用条件来应用所需的特定类

<div className={`wrapper searchDiv ${this.state.something ? "class that you want" : ""}`}>

如果你想使用makeStyle类，你可以像这样使用它

<div className={`wrapper searchDiv ${this.state.something ? classes.specifiedClass : ""}`}>

你可以这样做，普通的JavaScript:

className={'wrapper searchDiv ' + this.state.something}

或者字符串模板版本，带反引号:

className={`wrapper searchDiv ${this.state.something}`}

当然，这两种类型都是JavaScript，但第一种模式是传统模式。

无论如何，在JSX中，花括号括起来的任何内容都作为JavaScript执行，因此基本上可以在那里做任何想做的事情。但是将JSX字符串和花括号组合在一起是不适合属性的。

className={css(styles.mainDiv, 'subContainer')}

这个解决方案在React SPFx中进行了尝试和测试。

同时添加import语句:

import { css } from 'office-ui-fabric-react/lib/Utilities';

取决于你需要添加多少动态类，因为你的项目增长，它可能值得检查类名实用程序由JedWatson在GitHub。它允许您将条件类表示为对象，并返回那些求值为true的类。

举个React文档中的例子:

render () {

var btnClass = classNames({
  'btn': true,
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

return <button className={btnClass}>I'm a button!</button>;

} 

由于React会在状态发生变化时触发重新渲染，因此动态类名会被自然地处理，并与组件的状态保持同步。