はどのようにプログラム的

Question

私はマテリアルUIを使用している素材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>