Reactjs 如何添加多个类名'；反应组分是什么？

我需要将一个类名添加到从父级传递下来的组件中，另一个类名与父级无关，而是与组件本身有关

范例

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

{this.props.content.subTitle}

{this.props.content.headerText}
{this.props.content.paration}
{this.props.content.quote}

当我尝试这个方法时，两个类都不适用，我可以做一个或另一个，也可以不同时做两个。如何实现这一点？

或者，如果无法使用模板字符串：

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

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


我又亮又圆。

这适用于React+Material UI
makeStyles
这比简单串联更可取吗<代码>{this.state.className+“”+this.props.content.divClassName}
@James取决于你问谁。就我个人而言，我可能会像刚才添加的那样执行
[].join（）
，但我可能更喜欢模板字符串版本而不是串联。如果您可以编写原因和方式，那就太好了。这将
className
设置为布尔值。（这也是一个语法错误，因为它缺少
}
，但尽管如此，也不会产生预期的效果。）确实是缺少了}，我的错。但是，在我的应用程序中，我可以很好地使用这种方法。我还使用了| |，它仍然有效。我的错误是，它会将
className
设置为布尔值：facepalm:，但它应用的是布尔逻辑，因此它不会将值串联起来，也不会同时应用这两个值：它应用的是一个或另一个。如果这两个字符串都是非空字符串，并且您
&&
应用了它们，那么将只应用第二个字符串。如果你
|
它们，你只会得到第一个应用。然而问题是如何应用两者。我真诚地希望任何有信息的人评论为什么这不是一个好的解决方案，以及那些不知道的人，知道这不符合任何最佳实践。任何关于我如何传达这个信息的建议都将不胜感激。请把那些没有回答的部分放到评论中。对不起，这是一个无效的回答。只使用过二等舱。这大致翻译为
{className:（“闪亮”，“圆形”）}
，结果是
{className:“圆形”}