我需要添加一个动态类到常规类的列表，但不知道如何(我使用babel)，类似这样的东西:
<div className="wrapper searchDiv {this.state.something}">
...
</div>
什么好主意吗?
当前回答
如果你使用css模块，这对我来说是有用的。
const [condition, setCondition] = useState(false);
\\ toggle condition
return (
<span className={`${styles.always} ${(condition ? styles.sometimes : '')`}>
</span>
)
其他回答
一个简单的语法是:
<div className={`wrapper searchDiv ${this.state.something}`}>
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"
如果你使用css模块，这对我来说是有用的。
const [condition, setCondition] = useState(false);
\\ toggle condition
return (
<span className={`${styles.always} ${(condition ? styles.sometimes : '')`}>
</span>
)
尽管上面所有的答案都很好，但引起我注意的是字符串插值解决方案。因此，我想提出一种使用自定义StringBuilder的不同方法。
这是它的实现。
class StringBuilder {
static Builder() {
class Builder {
constructor() {
this.bucket = [];
}
append(str) {
if (str !== null) {
this.bucket.push(str);
}
return this;
}
build() {
return this.bucket.join(' ');
}
}
return new Builder();
}
}
然后在组件中像这样使用它。
const Field = (props) => {
const { label } = props;
const [hasFocus, setFocus] = useState(false);
const labelClasses = new StringBuilder.Builder()
.append('form-control')
.append(hasFocus ? 'has-focus' : null)
.build();
const turnOnFocus = () => setFocus(true);
const turnOffFocus = () => setFocus(false);
return (
<div onClick={turnOnFocus} onBlur={turnOffFocus} className="form-group">
<input
type="text"
defaultValue=""
onChange={setValue}
/>
<label className={labelClasses}>{label}</label>
</div>
);
};
通常，如果您有更多需要动态CSS类的元素，您可以为该特定元素实例化另一个构建器。此外，如果类以相同的逻辑出现在多个元素中，则解决方案是将该逻辑提取到方法或函数中。
