如何在反应中管理引导导航栏中的活动状态？ [复制]

Question

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

不过，我的最新项目可以使用 react。

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

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>
    );
}

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

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

Answer 2

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