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上指定它，你现在有两个试图设置nav的活动键的地方，这不是很好，所以RB忽略你在Nav中明确设置的那个，并且警告你忽略它。

Answer 2

解决的办法是将<NavigationBar />组件移到<Tab.Container />组件外，并将onSelect函数也添加到该组件（以处理活动选项卡）。那么没有更多的警告。