{this.props.PROP}在类名内。-ReactJS

我有下一个代码：

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title text-center" style={STYLES.titleStyle}><span class="glyphicon glyphicon-align-justify"></span> {this.props.title}</h3>
    </div>
    <div class="panel-body" style={STYLES.contentStyle}>
        {children}
    </div>
</div>

我想试着这样做：参见glyphicon，第3行

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title text-center" style={STYLES.titleStyle}><span class="glyphicon glyphicon-{this.props.MY-ICON}"></span> {this.props.title}</h3>
    </div>
    <div class="panel-body" style={STYLES.contentStyle}>
        {children}
    </div>
</div>

---

有没有办法做到这一点？。如果是的话。。。我怎么能这样做？谢谢。

在我使用图标的项目中，通常会有如下内容

下面是字体真棒，但只要将fa更改为glyphicons，它就会或多或少正确

export const Icon = (props: IconComponentProps) => {
    return <i className={ `fa fa-${props.icon} ${props.className}` } />;
};

你用它就像

<Icon icon="check" className="green" />

生产

如果您不想走那么远，只想让它在这种特定情况下工作，只需将myIcon道具传递给包含它的组件，并使用className={`glyphicon glyphicon-${this.props.myIcon}`}