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

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

同时添加import语句:

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

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

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

一个简单的语法是:

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

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

<span className={this.getBadgeClasses()}>Total Count</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类的元素，您可以为该特定元素实例化另一个构建器。此外，如果类以相同的逻辑出现在多个元素中，则解决方案是将该逻辑提取到方法或函数中。

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

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

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

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

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

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