我需要添加一个动态类到常规类的列表，但不知道如何(我使用babel)，类似这样的东西:
<div className="wrapper searchDiv {this.state.something}">
...
</div>
什么好主意吗?
当前回答
尝试使用钩子:
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",, undefined, null, this.state.something].filter((e) => e).join(" ")}"}>
...
</div>
结果是没有额外空格的className。
祝你有创意的一天!
取决于你需要添加多少动态类，因为你的项目增长，它可能值得检查类名实用程序由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会在状态发生变化时触发重新渲染，因此动态类名会被自然地处理，并与组件的状态保持同步。
尝试使用钩子:
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
}));
}
你可以这样做，普通的JavaScript:
className={'wrapper searchDiv ' + this.state.something}
或者字符串模板版本，带反引号:
className={`wrapper searchDiv ${this.state.something}`}
当然，这两种类型都是JavaScript，但第一种模式是传统模式。
无论如何，在JSX中，花括号括起来的任何内容都作为JavaScript执行，因此基本上可以在那里做任何想做的事情。但是将JSX字符串和花括号组合在一起是不适合属性的。
如果你需要根据状态条件显示的样式名，我更喜欢使用这种结构:
<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>
