如何從材料UI設置活動標籤在標籤編程

Question

我使用的材料UI和反應，我編程創建多個選項卡的可以看到下面：

return (
    <div> 
     <Tabs> 
      {this.state.elements.map(elem => { 
       return (
        <Tab key={elem.elemID} label={elem.name} > 
         <div> 
          // rest removed for brevity 
         </div> 
        </Tab> 
       ) 
      })} 
     </Tabs> 
    </div> 
); 

這工作，和選項卡顯示，但問題是，默認情況下，組件呈現時，第一個選項卡是活動的。而我想根據從道具獲得的id值以編程方式設置活動選項卡。所以基本上，如果this.props.selectedID === elem.elemID那麼我希望該選項卡是組件呈現時的活動選項卡。當然，一旦組件被渲染，用戶應該可以自由點擊並在標籤之間切換。任何想法如何實現它？

Answer 1

使用上Tabs和Tab的value道具，使這個控制組件：

<Tabs value={this.props.selectedID}> 
    {this.state.elements.map(elem => { 
      return (
       <Tab key={elem.elemID} label={elem.name} value={elem.elemID}> 
        <div> 
         // rest removed for brevity 
        </div> 
       </Tab> 
      ) 
     })} 
</Tabs>