Requisiten übergeben Router

Question

Man kann Requisiten an eine Komponente einer untergeordneten Route weitergeben (während React Router verwendet wird), indem die Requisiten an die Komponente Route für die untergeordnete Komponente übergeben werden und in der untergeordneten Komponente darauf zugegriffen wird dieser Route von this.props.route.propName.

Was ist mit den Requisiten in einer untergeordneten Komponente ist ein Teil des Zustands der übergeordneten Komponente und nicht nur einige nicht verwandte Daten zu den Komponenten?

Da

• in <Router /> der Zustand einer Mutter App in ihrem Umfang nicht ist, kann ein Durchlauf nicht zu Komponente in einem Unter <Route /> oder

• alle Bezugnahme auf eine untergeordnete Komponente in der Elternkomponente ist {this.props.children} und nicht <aComponent data={this.state.somePortion} />, man kann es wiederum nicht durch die Syntax des Ausdrucks {this.props.children} übergeben.

Was ist der Haken?

Answer 1

Aktualisierung: Statt des Speicherstatus innerhalb von App muss Ihr Status in der Komponente gespeichert werden, die die Routen dann an die Route weitergibt. Mit der folgenden Methode können Sie die Komponente umbrechen, wenn sie die aktuelle propType-Liste beibehalten soll. Wenn Sie this.props.route.propName nicht verwenden können, ist eine andere Option die Verwendung einer High-Order Component (HOC), die Ihre Komponente umschließt und auf der Route verwendet. Übergeben Sie dann die Routenrequisiten an die Komponente, die Sie rendern möchten.

Sie könnten dann weitere Erweiterbarkeit können Sie die Komponente übergeben, um auf die Route zu rendern.

<Route to='/about' component={WrappedComponent} data={[]} page={AboutPage} />

Dann so etwas wie diese gewickelte Update:

const WrappedComponent = ({ route }) => { 
    const { page:Component, ...rest } = route; 
    return <Component {...rest} />; 
}; 

Dies etwas ES2015 verwendet + mit dem Rest Operator, würde aber mehr Wiederverwendung auf dieser HOC ermöglichen.