我需要添加一个动态类到常规类的列表，但不知道如何(我使用babel)，类似这样的东西:
<div className="wrapper searchDiv {this.state.something}">
...
</div>
什么好主意吗?
当前回答
取决于你需要添加多少动态类，因为你的项目增长，它可能值得检查类名实用程序由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会在状态发生变化时触发重新渲染，因此动态类名会被自然地处理，并与组件的状态保持同步。
其他回答
取决于你需要添加多少动态类，因为你的项目增长，它可能值得检查类名实用程序由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会在状态发生变化时触发重新渲染，因此动态类名会被自然地处理，并与组件的状态保持同步。
这里是动态className的最佳选项，只需做一些连接，就像我们在Javascript中做的那样。
className={
"badge " +
(this.state.value ? "badge-primary " : "badge-danger ") +
" m-4"
}
如果你使用css模块，这对我来说是有用的。
const [condition, setCondition] = useState(false);
\\ toggle condition
return (
<span className={`${styles.always} ${(condition ? styles.sometimes : '')`}>
</span>
)
className={css(styles.mainDiv, 'subContainer')}
这个解决方案在React SPFx中进行了尝试和测试。
同时添加import语句:
import { css } from 'office-ui-fabric-react/lib/Utilities';
[2022年4月21日更新:在反撇号之前和之后添加花括号以防止错误]
您可以简单地使用条件来应用所需的特定类
<div className={`wrapper searchDiv ${this.state.something ? "class that you want" : ""}`}>
如果你想使用makeStyle类，你可以像这样使用它
<div className={`wrapper searchDiv ${this.state.something ? classes.specifiedClass : ""}`}>
