如何管理bootstrap navbar中的活动状态？

Question

我知道必须在bootstrap中手动管理活动类.我用jQuery做了几次.

我的最新项目虽然有所作为.

我知道在使用react时我不应该使用jQuery在dom中设置类.但是如何才能正确完成？

Answer 1

您只需active在render函数中指定选项卡的值即可.要知道选项卡是否应该具有该className属性的值,请将其存储在某处.

你如何在反应组件中存储东西？你用state.您没有显示任何代码,但您可以简单地跟踪您所在州目前处于活动状态的标签.

你可以这样做:

getInitialState: function() {
    return { activeTabClassName: "tab1" };
}

render: function() {
    return (
        <ul>
            <li className={(this.state.activeTabClassName === "tab1") ? "active" : ""}></li>
            <li className={(this.state.activeTabClassName === "tab2") ? "active" : ""}></li>className            </ul>
    );
}

警告:此代码块只是一个示例,未经过测试.(有几种方法可以做到).

您还可以检查:使用React.js在选项卡上切换类