我需要添加一个动态类到常规类的列表,但不知道如何(我使用babel),类似这样的东西:
<div className="wrapper searchDiv {this.state.something}">
...
</div>
什么好主意吗?
我需要添加一个动态类到常规类的列表,但不知道如何(我使用babel),类似这样的东西:
<div className="wrapper searchDiv {this.state.something}">
...
</div>
什么好主意吗?
当前回答
你可以这样做,普通的JavaScript:
className={'wrapper searchDiv ' + this.state.something}
或者字符串模板版本,带反引号:
className={`wrapper searchDiv ${this.state.something}`}
当然,这两种类型都是JavaScript,但第一种模式是传统模式。
无论如何,在JSX中,花括号括起来的任何内容都作为JavaScript执行,因此基本上可以在那里做任何想做的事情。但是将JSX字符串和花括号组合在一起是不适合属性的。
其他回答
尝试使用钩子:
const [dynamicClasses, setDynamicClasses] = React.useState([
"dynamicClass1", "dynamicClass2"
]);
并将其添加到className属性中:
<div className=`wrapper searchDiv ${[...dynamicClasses]}`>
...
</div>
添加类:
const addClass = newClass => {
setDynamicClasses([...dynamicClasses, newClass])
}
删除类:
const deleteClass= classToDelete => {
setDynamicClasses(dynamicClasses.filter(class = > {
class !== classToDelete
}));
}
不要想这么复杂的解决办法。
这是对你的问题最简单的解决办法。
<div className={`wrapper searchDiv ${this.state.something}`}>
...
</div>
一个简单的语法是:
<div className={`wrapper searchDiv ${this.state.something}`}>
如果你使用css模块,这对我来说是有用的。
const [condition, setCondition] = useState(false);
\\ toggle condition
return (
<span className={`${styles.always} ${(condition ? styles.sometimes : '')`}>
</span>
)
如果你需要根据状态条件显示的样式名,我更喜欢使用这种结构:
<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>