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

我需要将动态类添加到常规类列表中，但不知道该如何做（我正在使用babel），如下所示：

<div className="wrapper searchDiv {this.state.something}">
...
</div>

有任何想法吗？

您可以使用普通的JavaScript来执行此操作：

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

或带有反引号的字符串模板版本：

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

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

无论如何，在JSX中，用大括号括起来的所有内容都将作为JavaScript执行，因此您基本上可以在其中进行任何操作。但是，结合使用JSX字符串和大括号对属性来说是行不通的。

根据项目增长时需要添加的动态类的数量，可能值得在GitHub上查看JedWatson 的classnames实用程序。它使您可以将条件类表示为对象，并返回评估为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在状态更改时会触发重新渲染，因此动态类名会自然处理，并与组件的状态保持最新。

一个简单的可能语法为：

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

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

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

如果您需要根据状态条件出现的样式名称，我更喜欢使用以下构造：

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

尝试使用钩子：

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

        }

您可以使用此 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})} />

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

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

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

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

还添加import语句：

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