如何添加多個類名來反應組件？

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

Answer 3

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

Answer 4

我使用這樣的classnames ：

# terminal - install
$ yarn add classnames

// React component
import classnames from 'classnames';

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

Answer 5

如果您使用 css 模塊，目前最好的方法是作為數組。 在那里你可以添加沒有模塊的常規類。 這是示例：

<div className={[styles.restaurantEntry, styles.barEntry, 'alice', 'text-center']}</div>

Answer 6

<div className={(classes.shiny, classes.round)}>
    i'm shiny and round.
</div>

這適用於 React + Material-UI makeStyles 。