我需要添加一个动态类到常规类的列表，但不知道如何(我使用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>
其他回答
取决于你需要添加多少动态类，因为你的项目增长，它可能值得检查类名实用程序由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会在状态发生变化时触发重新渲染，因此动态类名会被自然地处理，并与组件的状态保持同步。
你可以使用这个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",, undefined, null, this.state.something].filter((e) => e).join(" ")}"}>
...
</div>
结果是没有额外空格的className。
祝你有创意的一天!
对于那些在React中使用反勾号或串联的className的人来说，一个警告:你需要在你的类名之间有空格。没有它们，你就有一个不匹配任何css的长单词。
[2022年4月21日更新:在反撇号之前和之后添加花括号以防止错误]
您可以简单地使用条件来应用所需的特定类
<div className={`wrapper searchDiv ${this.state.something ? "class that you want" : ""}`}>
如果你想使用makeStyle类，你可以像这样使用它
<div className={`wrapper searchDiv ${this.state.something ? classes.specifiedClass : ""}`}>
