我需要添加一个动态类到常规类的列表，但不知道如何(我使用babel)，类似这样的东西:
<div className="wrapper searchDiv {this.state.something}">
...
</div>
什么好主意吗?
当前回答
简单地在数组中组合类名，删除空值并连接到字符串中。
<div className={["wrapper", "searchDiv",, undefined, null, this.state.something].filter((e) => e).join(" ")}"}>
...
</div>
结果是没有额外空格的className。
祝你有创意的一天!
其他回答
一个简单的语法是:
<div className={`wrapper searchDiv ${this.state.something}`}>
不要想这么复杂的解决办法。
这是对你的问题最简单的解决办法。
<div className={`wrapper searchDiv ${this.state.something}`}>
...
</div>
简单地在数组中组合类名，删除空值并连接到字符串中。
<div className={["wrapper", "searchDiv",, undefined, null, this.state.something].filter((e) => e).join(" ")}"}>
...
</div>
结果是没有额外空格的className。
祝你有创意的一天!
getBadgeClasses() {
let classes = "badge m-2 ";
classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
return classes;
}
<span className={this.getBadgeClasses()}>Total Count</span>
如果你需要根据状态条件显示的样式名，我更喜欢使用这种结构:
<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>
