如何添加多个className来响应组件？

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>

当我尝试这个时,两个类都没有应用,我可以做其中一个或不同时做两个.我该如何实现这一目标？

Answer 1

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

或者,如果您不能使用模板字符串:

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

Answer 2

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

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