我需要将一个动态类添加到常规类列表中，但不知道如何（我正在使用 babel），如下所示：
<div className="wrapper searchDiv {this.state.something}">
...
</div>
有任何想法吗？
如何动态地将一个类添加到手动类名中？
IT技术
css
reactjs
2021-04-16 01:06:39
6个回答
您可以使用普通 JavaScript 执行此操作：
className={'wrapper searchDiv ' + this.state.something}
或字符串模板版本，带反引号：
className={`wrapper searchDiv ${this.state.something}`}
这两种类型当然都只是 JavaScript，但第一种模式是传统类型。
无论如何，在 JSX 中，用大括号括起来的任何东西都是作为 JavaScript 执行的，所以你基本上可以在那里做任何你想做的事。但是结合 JSX 字符串和大括号对于属性来说是行不通的。
根据您在项目增长时需要添加的动态类的数量，可能值得在 GitHub 上查看JedWatson的类名实用程序。它允许您将条件类表示为一个对象，并返回那些评估为真的类。
因此，作为其 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 在状态更改时会触发重新渲染，因此您的动态类名称会自然处理并与组件的状态保持同步。
一个简单的可能的语法是：
<div className={`wrapper searchDiv ${this.state.something}`}>
这是 Dynamic className 的最佳选项，只需像我们在 Javascript 中那样进行一些连接即可。
className={
"badge " +
(this.state.value ? "badge-primary " : "badge-danger ") +
" m-4"
}
使用钩子试试这个：
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
}));
}