我需要添加一个动态类到常规类的列表，但不知道如何(我使用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';
其他回答
你可以这样做，普通的JavaScript:
className={'wrapper searchDiv ' + this.state.something}
或者字符串模板版本，带反引号:
className={`wrapper searchDiv ${this.state.something}`}
当然，这两种类型都是JavaScript，但第一种模式是传统模式。
无论如何，在JSX中，花括号括起来的任何内容都作为JavaScript执行，因此基本上可以在那里做任何想做的事情。但是将JSX字符串和花括号组合在一起是不适合属性的。
你可以使用这个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"
简单地在数组中组合类名，删除空值并连接到字符串中。
<div className={["wrapper", "searchDiv",, undefined, null, this.state.something].filter((e) => e).join(" ")}"}>
...
</div>
结果是没有额外空格的className。
祝你有创意的一天!
如果你需要根据状态条件显示的样式名，我更喜欢使用这种结构:
<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>
