如何添加多个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(" ")}>