Material-UI Tabs Integration mit Reagieren Router 4?

8

Die neue react-rotuer-Syntax verwendet die Link -Komponente, um sich auf den Routen zu bewegen. Aber wie könnte dies mit materiaul-ui integriert werden?

In meinem Fall benutze ich Registerkarten als Hauptnavigationssystem. In der Theorie sollte ich so etwas haben:

%Vor%

Aber wenn es rendert, wirft Material-ui einen Fehler auf, dass das Kind von Tabs eine Tab -Komponente sein muss. Wie könnte man fortfahren? Wie verwalte ich die isActive-Prop für den Tab?

Vielen Dank im Voraus

    
Daniel Ramos 13.01.2017, 16:00
quelle

5 Antworten

3

Mein Instruktor hat mir geholfen, React Router 4.0's withRouter zu verwenden, um die Tabs-Komponente so zu verpacken, dass sie History-Methoden wie folgt aktiviert:

%Vor%

Fügen Sie browserRouter einfach zu index.js hinzu und Sie können loslegen.

    
gkatchmar 01.09.2017, 20:01
quelle
2

Der Fehler von material-ui liegt darin, dass erwartet wird, dass eine <Tab> -Komponente als direktes Kind der <Tabs> -Komponente gerendert wird.

Nun, hier ist ein Weg, den ich gefunden habe, um den Link in die <Tabs> -Komponente zu integrieren, ohne die Stile zu verlieren:

%Vor%

Um die Eigenschaft 'aktiv' für die Registerkarten zu verwalten, können Sie die value -Eigenschaft in der <Tabs> -Komponente verwenden, und Sie müssen auch eine value -Eigenschaft für jede Registerkarte haben, wenn beide Eigenschaften übereinstimmen , wird der aktive Stil auf diese Registerkarte angewendet.

    
erickpeniche 05.07.2017 15:47
quelle
1

Sie können browserHistory anstelle von React-Router Link component

verwenden %Vor%

Wie Sie sehen, können Sie einfach push() Ihr Ziel an die browserHistory

setzen     
Piotr O 14.01.2017 20:33
quelle
1

Hier ist eine andere Lösung, die die Beta von Material 1.0 verwendet und den Browser Back / Forward zum Mix hinzufügt:

%Vor%     
gkatchmar 12.10.2017 15:54
quelle
0

Wie @gkathmar sagt, können Sie withRouter höherwertige Komponente verwenden, aber Sie können auch context API verwenden. Da @gkatchmar bereits mitRouter gezeigt hat, zeige ich nur context API . Bedenken Sie, dass dies eine experimentelle API ist.

Ссылка

%Vor%     
Ogglas 29.09.2017 14:50
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Wie funktioniert Jetty beim Laden von Klassen mit derselben Klasse mit unterschiedlichen Abhängigkeiten?