Wie aktive Reiter in Tab von Werkstoff UI setzen programmatisch

Question

I Material UI bin mit und Reaktion, Ich erstelle programmatisch mehrere Tabs wie unten gesehen werden:

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> 
); 

Dies funktioniert, und die Laschen sind angezeigt, aber das Problem ist, dass die erste Registerkarte standardmäßig aktiv ist, wenn die Komponente gerendert wird. Während ich die aktive Registerkarte programmatisch basierend auf einem ID-Wert setzen möchte, den ich von Requisiten bekomme. Also, im Grunde, wenn this.props.selectedID === elem.elemID dann möchte ich diese Registerkarte die aktive Registerkarte sein, wenn die Komponente rendert. Nachdem die Komponente gerendert wurde, sollte der Benutzer natürlich frei sein, zu klicken und zwischen den Registerkarten zu wechseln. Irgendeine Idee, wie man es erreicht?

Answer 1

Verwenden Sie die value prop auf Tabs und Tab diese eine kontrollierte Komponente zu machen:

<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>