Reac-bootstrap：警告：不支持在“<TabContainer>”的上下文中指定“<Nav>”、“activeKey”或“activeHref”

Question

该组件实际上可以正常工作，但每次更改选项卡时，都会抛出此警告：

Warning: Specifying a `<Nav>` `activeKey` or `activeHref` in the 
context of a `<TabContainer>` is not supported. Instead use 
`<TabContainer activeKey={First} />`.

不太确定如何抑制它！

我正在通过 MobX 商店控制 activeKey。这是一个示例：

<Tab.Container defaultActiveKey={"first"} activeKey={store.key} onSelect={store.handleSelect} >
    <NavigationBar store = {this.store}/>
    <Tab.Content animation={false} >
        <Tab.Pane  eventKey={"first"} >
            <FirstTab store = {this.store}  eventKey={"first"} />
        </Tab.Pane>
        <Tab.Pane   unmountOnExit={true} eventKey={"second"}>
            <SecondTab store = {this.store} />
        </Tab.Pane>
        <Tab.Pane  unmountOnExit={true} eventKey={"third"}>
            <ThirdTab store = {this.store} />
        </Tab.Pane>
    </Tab.Content>
</Tab.Container>

在我的 MobX 商店中：

@observable key = "First";
@action handleSelect = (key) => {
    this.key = key;
    if(key === undefined){
        this.key = "First"
    }
};

和 NavigationBar 组件：

<Nav bsStyle="tabs" activeKey={this.props.store.key} >
    <NavItem eventKey={"First"}>
        // Some icon
    </NavItem>
    <NavItem eventKey={"Second"}>
        // Some icon
    </NavItem>
    <NavItem eventKey={"Third"}>
        // Some icon
    </NavItem>
</Nav>

如前所述，一切都按预期进行。每当标签的状态变化时，我都会得到这个警告。

Answer 1

警告是正确的。问题是在 TabContainer 内部使用时，Tab 容器会自行处理活动的导航项，以便管理选择了哪个选项卡。如果你在 Nav 上指定它，你现在有两个地方试图设置导航的活动键，这不是很好所以 RB 会忽略你在导航中明确设置的那个并警告你它正在忽略它。

Answer 2

解决方案是将 <NavigationBar /> 组件移到 <Tab.Container /> 组件之外，并向其添加 onSelect 功能（以处理活动选项卡）。那就不用警告了。

Reac-bootstrap：警告：不支持在“<TabContainer>”的上下文中指定“<Nav>”、“activeKey”或“activeHref”

Reac-bootstrap: Warning: Specifying a `<Nav>` `activeKey` or `activeHref` in the context of a `<TabContainer>` is not supported

twitter-bootstrap

reactjs

react-bootstrap