react如何添加同时添加静态和动态class

Question

<div className={this.state.like===true?'icon-active ':""+"icon-box"} onClick={this.clickToLike}>
    <i className="iconfont icon-dianzan"></i>
</div>

如上，我想让className中既有默认的class又根据变量添加一个动态class,该如何添加，现在结果是如果icon-active添加了之后，则后面的class就没有了。
如果我把默认的class写在前面，就直接都显示不出来样式了。

 <div className={"icon-box"+" "+this.state.like===true?' icon-active':""} onClick={this.clickToLike}>
    <i className="iconfont icon-dianzan"></i>
</div>

Answer 1

你可能没弄明白运算优先级，可以考虑用模板字符串

<div className={`icon-box ${this.state.like === true ? "icon-active" : ""}`} onClick={this.clickToLike}>
    <i className="iconfont icon-dianzan"></i>
</div>