我需要添加一个动态类到常规类的列表，但不知道如何(我使用babel)，类似这样的东西:
<div className="wrapper searchDiv {this.state.something}">
...
</div>
什么好主意吗?
当前回答
这里是动态className的最佳选项，只需做一些连接，就像我们在Javascript中做的那样。
className={
"badge " +
(this.state.value ? "badge-primary " : "badge-danger ") +
" m-4"
}
其他回答
一个简单的语法是:
<div className={`wrapper searchDiv ${this.state.something}`}>
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",, undefined, null, this.state.something].filter((e) => e).join(" ")}"}>
...
</div>
结果是没有额外空格的className。
祝你有创意的一天!
const ClassToggleFC= () =>{
const [isClass, setClass] = useState(false);
const toggle =() => {
setClass( prevState => !prevState)
}
return(
<>
<h1 className={ isClass ? "heading" : ""}> Hiii There </h1>
<button onClick={toggle}>Toggle</button>
</>
)
}
我只是简单地创建了一个功能组件。在里面，我采取一个状态，并设置初始值为false..
我有一个按钮切换状态..
每当我们改变状态渲染组件时，如果状态值(isClass)为假，h1的className应该是""如果状态值(isClass)为真，h1的className应该是"heading"
这里是动态className的最佳选项，只需做一些连接，就像我们在Javascript中做的那样。
className={
"badge " +
(this.state.value ? "badge-primary " : "badge-danger ") +
" m-4"
}
