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

Question

我知道必须在引导程序中手动管理活动类。我已经用jQuery完成了几次。

我最新的项目与react反应。

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

Answer 1

您只需要active在render函数中指定选项卡的值即可。要知道选项卡是否应具有该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>
    );
}

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