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

IT技术 reactjs
2021-05-04 11:22:07

我需要将一个 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>

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

4个回答
<div className={`${this.state.className} ${this.props.content.divClassName}`}>

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

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

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

字符串和props类的组合在这里

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

我这样使用classnames：

# terminal - install
$ yarn add classnames

// React component
import classnames from 'classnames';

<Component classNames={classnames(class1, class2)} />

<div className={this.state.className && this.props.content.divClassName></div>

其它你可能感兴趣的问题
上一篇Lodash 去抖动在 React 中不起作用 下一篇了解水溶性支撑结构