对于那些在React中使用反勾号或串联的className的人来说，一个警告:你需要在你的类名之间有空格。没有它们，你就有一个不匹配任何css的长单词。

这里是动态className的最佳选项，只需做一些连接，就像我们在Javascript中做的那样。

     className={
        "badge " +
        (this.state.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

如果你需要根据状态条件显示的样式名，我更喜欢使用这种结构:

<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>

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"

尝试使用钩子:

const [dynamicClasses, setDynamicClasses] = React.useState([
    "dynamicClass1", "dynamicClass2"
]);

并将其添加到className属性中:

<div className=`wrapper searchDiv ${[...dynamicClasses]}`>
...
</div>

添加类:

    const addClass = newClass => {
       setDynamicClasses([...dynamicClasses, newClass])
    }

删除类:

        const deleteClass= classToDelete => {

           setDynamicClasses(dynamicClasses.filter(class = > {
             class !== classToDelete
           }));

        }

简单地在数组中组合类名，删除空值并连接到字符串中。

<div className={["wrapper", "searchDiv",, undefined, null, this.state.something].filter((e) => e).join(" ")}"}>
...
</div>

结果是没有额外空格的className。

祝你有创意的一天!