2017-10-24 2 views
0

Im ausgelöst wird die Arbeit an einem Projekt reagieren, mit die Zustand reagieren, und mit reagieren-Router-dom v4.reagiert-Router-v4: Wie this.state Daten an eine Komponente zu übergeben, die nur durch die Route

Im Versuch, zu verstehen, wie kann ich die App-Zustand zu einer nicht untergeordneten Komponente übergebe, die in meinen <Route path="/newpage" component={parentlessComponent}>

gerendert wird

Wie gebe ich Daten auf eine elternlos Komponente?

+0

Ich bin neu zu reagieren. Hier ist eine Umgehung: Wenn Sie keine wichtigen Daten im App-Zustand speichern, können Sie _localStorage_ verwenden. – aquaman

+0

Verwenden Sie Redox? –

+0

nein, ich benutze den Status von react – ueeieiie

Antwort

1

Sie könnten der Render verwenden Stütze statt und etwas tun, wie folgt aus:

<Route path="/newpage" render={()=><ParentlessComponent someProp={true} />} /> 

Es gibt mehrere Möglichkeiten, wie Sie dies tun könnte. Sie können mehr darüber lesen here.

+0

meine Routen sind auf einem anderen Modul, wie kann ich also den Zustand der App "extrahieren", , damit ich es als Requisiten in die Render-Methode übergeben konnte? – ueeieiie

+0

Wenn die Requisiten vom App-Status abhängig sind, sollten Sie den Status der Apps angeben, in dem Sie Ihre Routen definieren. Angenommen, Sie haben Ihre Routen in App.js definiert. Wenn Sie react-redux verwenden, können Sie Ihre App verbinden() und auf Ihr Geschäft zugreifen. Wenn nicht, werden Sie einfach den Zustand von dort weitergeben, wo Sie ihn haben. –

+0

Ich sehe. aber was kann ich tun, wenn ich will, meine routen getrennt von meiner app.js zu halten? also werde ich einen saubereren Code haben, was dann? Kann ich den Status selbstständig aus der App-Komponente "extrahieren"? – ueeieiie

2

Sie können Ihre parentlessComponent mit render rendern und den Komponentenstatus und andere Daten übergeben, die Sie möchten.

<Route path='/newpage' render={() => (
     <parentlessComponent {...this.state} data={extraProps}/> 
    )}/> 

Und in Ihrem parentlessComponent können Sie mit Requisiten zugreifen.

class parentlessComponent extends React.component{ 

    constructor(props){ 
     super(props); 

     this.parentData= this.props.data; 
     this.parentState= this.props.some_parent_state; 
    }  
    } 
+0

Was passiert, wenn meine app.js und meine routes.js in separaten Dateien sind? kann ich nur den Status aus der App-Komponente extrahieren, damit ich ihn in die Routes-Datei importieren und als Props an die elternlose Komponente übergeben kann? – ueeieiie

+1

@ueeiee Erstellen Sie eine Klasse mit Getter und Setter mit diesem Zustand Daten und teilen Sie zwischen app, js und route.js.Sie müssen Singleton-Klasse erstellen –

Verwandte Themen