ReactJS将动态类添加到手动类名称

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 [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 ${this.state.something}`}>

这是Dynamic className的最佳选择，就像我们在Javascript中那样进行一些串联。

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