Question

我需要将一个动态类添加到常规类列表中，但不知道如何（我正在使用babel），如下所示：

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

有什么想法吗？

由于

Answer 1

你可以这样做，普通的javascript：

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

或字符串模板版本

带有反叛的

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

这两种类型当然只是javascript，但第一种模式是传统类型。无论如何，在JSX中，用大括号括起来的任何东西都是以javascript的形式执行的，所以你基本上可以做任何你想做的事。但是将JSX字符串和组合在一起是一个禁忌的属性。

Answer 2

根据您在项目增长时需要添加的动态类数量，可能值得在GitHub上查看JedWatson的classnames实用程序。它允许您将条件类表示为对象，并返回评估为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会在状态发生变化时触发重新渲染，因此您的动态类名称会自然处理并与组件的状态保持同步。

Answer 3

一种简单的可能语法是：

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

Answer 4

这里是Dynamic className的最佳选择，就像我们在Javascript中那样进行一些串联。

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

Answer 5

使用hooks尝试：

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

        }

Answer 6

不要想这么复杂的解决方案。

这里是解决您问题的最简单方法。

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

Answer 7

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

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

还添加导入语句：

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

Answer 8

如果您使用的是 css 模块，这对我有用。

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

\\ toggle condition

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

Answer 9

您可以使用this 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})} />

Answer 10

如果您需要根据状态条件出现的样式名称，我更喜欢使用这种构造：

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

Answer 11

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

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

Answer 12

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) 为 false h1 的 className 应该是 "" 并且如果状态值 (isClass) 是 true h1 的 className 是 "heading"

Answer 13

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

Answer 14

你可以简单地使用条件来申请你想要的特定课程

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

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

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

ReactJS将动态类添加到手动类名

14 个答案: