我需要添加一个动态类到常规类的列表,但不知道如何(我使用babel),类似这样的东西:
<div className="wrapper searchDiv {this.state.something}">
...
</div>
什么好主意吗?
我需要添加一个动态类到常规类的列表,但不知道如何(我使用babel),类似这样的东西:
<div className="wrapper searchDiv {this.state.something}">
...
</div>
什么好主意吗?
当前回答
不要想这么复杂的解决办法。
这是对你的问题最简单的解决办法。
<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}`}>
[2022年4月21日更新:在反撇号之前和之后添加花括号以防止错误]
您可以简单地使用条件来应用所需的特定类
<div className={`wrapper searchDiv ${this.state.something ? "class that you want" : ""}`}>
如果你想使用makeStyle类,你可以像这样使用它
<div className={`wrapper searchDiv ${this.state.something ? classes.specifiedClass : ""}`}>
你可以使用这个npm包。它处理所有事情,并基于变量或函数为静态类和动态类提供选项。
// Support for string arguments
getClassNames('class1', 'class2');
// support for Object
getClassNames({class1: true, class2 : false});
// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], {
class5 : function() { return false; },
class6 : function() { return true; }
});
<div className={getClassNames({class1: true, class2 : false})} />
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"