如何在反应中管理引导导航栏中的活动状态? [英] how to manage active state in bootstrap navbar in react?

问题描述

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

I know that the active class has to be managed manually in bootstrap. I have done that a few times with jQuery.

不过，我的最新项目与 react 一起使用.

My newest project works with react though.

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

I know that I am not supposed to set classes in the dom with jQuery when using react. But how would this be done correctly?

推荐答案

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

You simply have to specify the active value of the tabs in your render function. To know whether or not a tab should have a value for the the className property is to store it somewhere.

你如何在 React 组件中存储一些东西?您使用 state.您尚未显示任何代码，但您可以简单地跟踪当前处于您状态的哪个标签页处于活动状态.

How do you store something in a react component? You use state. You haven't shown any code but you could simply keep track of which tab is currently active in your 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>
    );
}

警告:此代码块只是一个示例，未经测试.(有几种方法可以做到).

Warning: This code block is just one example and isn't tested. (There are several ways to do it).

您也可以检查一下:使用 React.js 在选项卡上切换类

这篇关于如何在反应中管理引导导航栏中的活动状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！