如何添加多个类名来反应组件？

Question

我需要将一个 className 添加到从父级传递下来的组件，以及另一个与其父级没有任何关系但与组件本身有关的 className。

例子

<div className={this.state.className} className={this.props.content.divClassName}>
      <div className={this.props.content.containerClassName}>
      <div className="row">
      <div className="col-sm-6 col-sm-offset-6">
        <p>{this.props.content.subTitle}</p>
        <h1 className={this.props.content.titleClassName}>{this.props.content.headerText}</h1>
        <p className={this.props.content.subTitleClassName}>{this.props.content.paragraph}</p>
        <p>{this.props.content.quote}</p>
        <Button showMe={this.props.content.showButton} buttonText={this.props.content.buttonText} />
      </div>
      </div>
      </div>
    </div>

当我尝试这个时，两个课程都没有应用，我可以做一个或另一个或两个都做。我如何实现这一目标？

原文由 ceckenrode 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<div className={`${this.state.className} ${this.props.content.divClassName}`}>

或者，如果您不能使用模板字符串：

 <div className={[this.state.className, this.props.content.divClassName].join(" ")}>

原文由 JMM 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用模板文字（模板字符串），

字符串和道具类的组合在这里

className={`${props.myClass} MyStringClass`}

原文由 Muhammad Muzamil 发布，翻译遵循 CC BY-SA 4.0 许可协议