如何添加多个 className 来响应组件? [英] How can I add multiple className's to react component?

问题描述

我需要将一个 className 添加到一个从父级传递过来的组件，另一个 className 与其父级无关，但与组件本身无关.

例子

<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 className={`${this.state.className} ${this.props.content.divClassName}`}>

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

I need to add one className to a component which is being passed down from the parent, and another className that doesn't have anything to do with its parent, but with the component itself.

example

<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>

When I try this, neither class is applied, I can do one or the other or not both. How do I achieve this?

解决方案

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

Or if you can't use template strings:

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

这篇关于如何添加多个 className 来响应组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！