Legen Sie eine Registerkarte als aktiv in Material Ui Registerkarte Komponente

Question

Ich verwende Material UI als die obligatorische Bibliothek für die aktuelle Projekt. Eine Seite eines Projekts benötigt vier Registerkarten, also verwende ich die Tab-Komponente aus der Materialbibliothek.

Wenn ich die Seite rendern, die die Registerkarten standardmäßig enthält, ist die erste Registerkarte die aktive Registerkarte. Ich möchte die vierte Registerkarte als aktiv festlegen.

Aus der Dokumentation sehe ich die "Wert" Prop der Registerkarte. Also setze ich die Werte meiner vier Tabs jeweils auf 1,2,3 und 4 für jedes Tab. Wenn ich zum entsprechenden Bildschirm navigiere, verschicke ich eine Aktion, die in meinem Geschäft als Eigenschaftsreiterwert auf 4 gesetzt ist.

Dann habe ich durch mapStateToProps diese Eigenschaft für meine Komponente zugänglich gemacht. Also der Wert, wenn ich die Seite betrete ist vier, aber immer noch das aktive Tab ist das erste. Lassen Sie mich Ihnen meinen Code:

const mapStateToProps = state => ({ 
    value: state.get('tabValue'); 
}); 

const mapDispatchToProps = dispatch => ({ 
tabClicked:() => setActiveTab('tabValue', 4) 
}) 

Und meine Komponente:

const Tabs = ({ value }) => (
<Tabs> 
    <Tab value={1}></Tab> 
    .... 
    <Tab value={value}</Tab> 
</Tabs 

)

Answer 1

Für Sie eine andere Registerkarte standardmäßig Verwendung initialSelectedIndex auszuwählen. Es wird

von der Form

<Tabs initialSelectedIndex={value}> 
    <Tab value={1}></Tab> 
    ... 
    <Tab value={4}></Tab> 
</Tabs> 

prüfen http://www.material-ui.com/#/components/tabs