如何管理 bootstrap 导航栏中的活动状态？

Question

我知道活动 class 必须在 bootstrap 中手动管理。我用 jQuery.

做过几次

不过我的最新项目使用了 React。

我知道在使用 React 时我不应该在 dom 中设置 classes 和 jQuery。但是如何正确地做到这一点？

Answer 1

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

Answer 2

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

如何在 React 组件中存储内容？您使用 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

如何管理 bootstrap 导航栏中的活动状态？

how to manage active state in bootstrap navbar in react?

twitter-bootstrap

reactjs