我需要添加一个动态类到常规类的列表，但不知道如何(我使用babel)，类似这样的东西:
<div className="wrapper searchDiv {this.state.something}">
...
</div>
什么好主意吗?
当前回答
className={css(styles.mainDiv, 'subContainer')}
这个解决方案在React SPFx中进行了尝试和测试。
同时添加import语句:
import { css } from 'office-ui-fabric-react/lib/Utilities';
其他回答
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"
getBadgeClasses() {
let classes = "badge m-2 ";
classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
return classes;
}
<span className={this.getBadgeClasses()}>Total Count</span>
尝试使用钩子:
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 === "a" ? " anotherClass" : "")'}>
[2022年4月21日更新:在反撇号之前和之后添加花括号以防止错误]
您可以简单地使用条件来应用所需的特定类
<div className={`wrapper searchDiv ${this.state.something ? "class that you want" : ""}`}>
如果你想使用makeStyle类，你可以像这样使用它
<div className={`wrapper searchDiv ${this.state.something ? classes.specifiedClass : ""}`}>
