如何动态地将一个类添加到手动类名?

你可以这样做，普通的JavaScript:

className={'wrapper searchDiv ' + this.state.something}

或者字符串模板版本，带反引号:

className={`wrapper searchDiv ${this.state.something}`}

当然，这两种类型都是JavaScript，但第一种模式是传统模式。

无论如何，在JSX中，花括号括起来的任何内容都作为JavaScript执行，因此基本上可以在那里做任何想做的事情。但是将JSX字符串而且花括号组合为属性是不可取的。

根据你的项目增长需要添加多少动态类，可能值得一试GitHub上JedWatson的一会实用程序。它允许您将条件类表示为对象，并返回那些求值为true的类。

举个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会在状态发生变化时触发重新渲染，因此动态类名会被自然地处理，并与组件的状态保持同步。

你可以使用这 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})} />

一个简单的语法是:

<div className={`wrapper searchDiv ${this.state.something}`}>

这里是动态className的最佳选项，只需做一些连接，就像我们在Javascript中做的那样。

     className={
"badge " +
(this.state.value ? "badge-primary " : "badge-danger ") +
" m-4"
}

如果你需要根据状态条件显示的样式名，我更喜欢使用这种结构:

<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>

getBadgeClasses() {
let classes = "badge m-2 ";
classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
return classes;
}


<span className={this.getBadgeClasses()}>Total Count</span>

className={css(styles.mainDiv, 'subContainer')}

这个解决方案在React SPFx中进行了尝试和测试。

同时添加import语句:

import { css } from 'office-ui-fabric-react/lib/Utilities';

尝试使用钩子:

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
}));


}

如果你使用css模块，这对我来说是有用的。

const [condition, setCondition] = useState(false);


\\ toggle condition


return (
<span className={`${styles.always} ${(condition ? styles.sometimes : '')`}>
</span>
)

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应该是""如果state value (isClass)为真，h1的className为"

尽管上面所有的答案都很好，但引起我注意的是字符串插值解决方案。因此，我想使用自定义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类的元素，您可以为该特定元素实例化另一个构建器。此外，如果类以相同的逻辑出现在多个元素中，则解决方案是将该逻辑提取到方法或函数中。

不要想这么复杂的解决办法。

这是对你的问题最简单的解决办法。

<div className={`wrapper searchDiv ${this.state.something}`}>
...
</div>

[2022年4月21日更新:在反撇号之前和之后添加花括号以防止错误]

您可以简单地使用条件来应用所需的特定类

<div className={`wrapper searchDiv ${this.state.something ? "class that you want" : ""}`}>

如果你想使用makeStyle类，你可以像这样使用它

<div className={`wrapper searchDiv ${this.state.something ? classes.specifiedClass : ""}`}>

对于那些在React中使用反勾号或串联的className的人来说，一个警告:类名之间需要有空格。没有它们，你就有一个不匹配任何css的长单词。