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函數也添加到該組件（以處理活動選項卡）。那麼沒有更多的警告。