Die Frage der Anwendungsarchitektur. Angenommen, es gibt viele Komponenten (look at the picture) (Netz) auf einer Seite. Gibt es eine bessere Möglichkeit, die wichtigsten Kinderkomponenten (aktiv/nicht aktiv) zu wechseln? Und Seiten (1, 2, 3, nächste)? Kann ich den react-Router für beide Aufgaben verwenden? P.S .: Ich benutze ReactJS zum RendernReagieren, Redux, React-Router?
Ich würde nicht react-Router für Ergebnisfilterung verwenden. Da Sie Redux verwenden, können Sie Ihre Reduzierungen in Hauptabschnitte aufteilen und den Status aktiv/nicht aktiv sowie die aktuelle Seite pro Abschnitt in einem Geschäft beibehalten.
Ich denke, Sie sollten react-Router auf dieser Seite nicht verwenden müssen.
Sie sollten den Zustand kontrollieren (aktiv/nicht aktiv, 1,2,3, next) durch Druckminderer, wie unten:
case NEXT_PAGE:
return {...state, list:[{active:0, ...others},{active:1, ...others},...], page: 1};
Und Sie können die Daten, die Sie auf diese angezeigt werden sollen Seite von Requisiten.
mapStateToProps(state) {
return {
list: state.xxx.list,
currentPage: state.xxx.page
totalPage: state.xxx.total
}
}
Der Schlüssel ist der Anwendungsfall. Wenn Sie folgende Anwendungsfälle haben:
Dann würde ich definitiv sagen, verwenden Sie die Reaktion Router.
Sie können eine Route wie diese: <Route path="main/:status/:page" component={Main}/>
Dann würde das params-Objekt als Requisiten, um Ihren Hauptbestandteil injiziert werden.
Wenn Benutzer auf die Schaltflächen klicken, würden Sie die push von React-Router verwenden, um die Route oder die einfach Link von Reagieren Router ändern. (statt Versandaktion mit Redux oder this.setState zu verwenden, wenn Sie als lokalen Status gespeichert haben).
Ich denke, es ist nicht schwieriger, als es mit dem redux oder lokalen Zustand zu speichern, mit dem zusätzlichen Vorteil von mehr Anwendungsfällen oben.
Wenn Sie eine solide und skalierbare Anwendungsarchitektur wollen, würde ich vorschlagen, ein Starterkit zu verwenden.
Das Wiki eines guten Starterkits beschreibt die gewählten Konstruktionsprinzipien.
Eines meiner Lieblings Starter-Kits mit einem Headless Backend zu kombinieren ist React Redux starter kit.
Hängt davon ab: Sollte jede untergeordnete Komponente eine eindeutige URL haben, wenn sie aktiv ist? Wenn ja, kann React Router trivial tun, was Sie wollen. Wenn nein, dann verwenden Sie besser den Status in der übergeordneten Komponente, um zu entscheiden, welches Kind gerendert werden soll. –
Lustige Sache ist, ich dachte, du hättest ein lateinisches Verb verfärbt./OT –