我需要添加一个动态类到常规类的列表,但不知道如何(我使用babel),类似这样的东西:
<div className="wrapper searchDiv {this.state.something}">
...
</div>
什么好主意吗?
我需要添加一个动态类到常规类的列表,但不知道如何(我使用babel),类似这样的东西:
<div className="wrapper searchDiv {this.state.something}">
...
</div>
什么好主意吗?
当前回答
[2022年4月21日更新:在反撇号之前和之后添加花括号以防止错误]
您可以简单地使用条件来应用所需的特定类
<div className={`wrapper searchDiv ${this.state.something ? "class that you want" : ""}`}>
如果你想使用makeStyle类,你可以像这样使用它
<div className={`wrapper searchDiv ${this.state.something ? classes.specifiedClass : ""}`}>
其他回答
getBadgeClasses() {
let classes = "badge m-2 ";
classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
return classes;
}
<span className={this.getBadgeClasses()}>Total Count</span>
对于那些在React中使用反勾号或串联的className的人来说,一个警告:你需要在你的类名之间有空格。没有它们,你就有一个不匹配任何css的长单词。
如果你需要根据状态条件显示的样式名,我更喜欢使用这种结构:
<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>
这里是动态className的最佳选项,只需做一些连接,就像我们在Javascript中做的那样。
className={
"badge " +
(this.state.value ? "badge-primary " : "badge-danger ") +
" m-4"
}
你可以这样做,普通的JavaScript:
className={'wrapper searchDiv ' + this.state.something}
或者字符串模板版本,带反引号:
className={`wrapper searchDiv ${this.state.something}`}
当然,这两种类型都是JavaScript,但第一种模式是传统模式。
无论如何,在JSX中,花括号括起来的任何内容都作为JavaScript执行,因此基本上可以在那里做任何想做的事情。但是将JSX字符串和花括号组合在一起是不适合属性的。