尝试使用钩子:

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
           }));

        }

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

你可以使用这个npm包。它处理所有事情，并基于变量或函数为静态类和动态类提供选项。

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />

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

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

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

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

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

取决于你需要添加多少动态类，因为你的项目增长，它可能值得检查类名实用程序由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会在状态发生变化时触发重新渲染，因此动态类名会被自然地处理，并与组件的状态保持同步。

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

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