我需要添加一个动态类到常规类的列表,但不知道如何(我使用babel),类似这样的东西:

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

什么好主意吗?


当前回答

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

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

其他回答

你可以使用这个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})} />

一个简单的语法是:

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

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

尝试使用钩子:

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 === "a" ? " anotherClass" : "")'}>