如何在React中管理Bootstrap导航栏的活动状态？

Question

我知道在Bootstrap中，活动类必须手动管理。我以前使用过jQuery几次。

但是我的最新项目使用React。

我知道当使用React时不应该使用jQuery在DOM中设置类。但是正确的方法是什么呢？

- Alex

---

很抱歉重复了，但说实话，我并没有理解那篇其他帖子中的答案。相比之下，我理解Jeremy D和PhInside的两个答案，所以到底怎么回事... - Alex

Answer 1

在您的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>
    );
}

警告：这段代码仅是一个示例，未经测试。（有多种方法可以实现同样的效果）。

您还可以查看此链接：在React.js中切换选项卡上的类

- Jeremy D

---

非常好的解释 - 我明白了：将活动导航的名称作为状态传递，然后在渲染时设置className。非常感谢！ - Alex

哦耶，这正是我正在寻找的！！到目前为止，React 真是太棒了。 - Manjunath Satyamurthy

Answer 2

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

- Phi Nguyen

---

我一定也会尝试那个解决方案，非常感谢！ - Alex