Javascript React：如何使用类和变量类

我正在尝试为导航元素构建一个简单的react组件。到目前为止，我就是这样做的

这确实是一个简单的问题，但是如何向类名集添加变量值呢？在本例中，每个元素都有类

项

，初始元素还额外获得类

活动

export default class Example extends Component {
    constructor(props) {
        super(props);
        this.state = { activeTab: 'Initial' };
        this.setActiveClassOnTab = this.setActiveClassOnTab.bind(this);
        this.handleChangeTabs = this.handleChangeTabs.bind(this);
    }

    setActiveClassOnTab(tab) {
        return this.state.activeTab === tab ? 'active' : '';
    }

    handleChangeTabs(event) {
        this.setState({ activeTab: event.target.textContent });
    }

    render() {
        return (
            <div className="ui compact menu">
                { this.props.menu.map((item) => {
                    return (<a className="item { this.setActiveClassOnTab(item.title) }" onClick={ this.handleChangeTabs } key={ item.title}>{ item.title }</a>);
                }) }
            </div>
        );
    }
}

导出默认类示例扩展组件{
建造师（道具）{
超级（道具）；
this.state={activeTab:'Initial'}；
this.setActiveClassOnTab=this.setActiveClassOnTab.bind（this）；
this.handlechangetab=this.handlechangetab.bind（this）；
}
setActiveClassOnTab（选项卡）{
返回this.state.activeTab===tab‘active’：“”；
}
handleChangeTabs（事件）{
this.setState（{activeTab:event.target.textContent}）；
}
render（）{
返回(
{this.props.menu.map（（项）=>{
返回（{item.title}）；
}) }
);
}
}

字符串模板是您需要的：

<a className={`item ${this.setActiveClassOnTab(item.title)}`} />

您在

${

和

}

之间放置的任何内容都将在运行时进行计算和替换，因此您可以动态插入正在查找的类，而无需连接字符串。

在这里是一个很好的、清晰的解决方案：

<a className={`item ${this.setActiveClassOnTab(item.title)}`} onClick={ this.handleChangeTabs } key={ item.title}>{ item.title }</a>

{item.title}

不过，这需要在模板文字周围加上花括号。请添加一些解释，说明此代码为何有助于OP。这将有助于提供一个未来观众可以从中学习的答案。有关更多信息，请参阅。