如何管理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>
    );
}

警告：此代码块只是一个示例，未经过测试。 （有几种方法可以做到）。

你也可以查看：Switch class on tabs with React.js

Answer 2

您可以使用react-router自动或手动管理引导程序导航栏中的活动状态。