Das bestehen der staatlichen als Requisiten von den Eltern auf das Kind Reagieren-Router?

Ich habe mit Reagieren-Router für die letzten paar Tage und Iv ' E worden, es zu lieben! Ein problem, dass Iv ' E worden, habe, ist, dass ich kann nicht herausfinden, der beste Weg, um pass state von meinem übergeordneten Komponente, um mein Kind Komponente. Iv 'E worden, einige stack-überlauf und blog-posts, aber ich kann nicht scheinen, um herauszufinden, was Iv' E wollte. Hier ist ein sehr über Vereinfachtes Beispiel über das, was ich Suche. 

class App extends React.Component  {
  constuctor(props)  {
     super(props);
     this.state = {name:"helloworld", lastname:"world hello"};
  }

  render()  { //SOMETHING LIKE THIS WOULD BE PREFFERED
     if (this.props.children.name == "Home")  {
        {this.props.children myname={this.state.name}}
     }
     else if (this.props.children.name = "Account")  {
        {this.props.children anotherprop={this.state.lastname}}
     }
  }


}


class Home extends React.Component  {
  render()  {
    return (
      {this.props.myname}
    );
  }
}


class Account extends React.Component  {
  render()  {
  return (
    {this.props.lastname}
  );
  } 
}
//ROuting config - (Only the routes not the config)

<Route path="/" component={App}>
  <IndexRoute component={Home} />
  <Route path="account" component={account} />
</Route>

Offensichtlich ist dies eine sehr vereinfachte version von dem, was ich bin versucht zu erreichen, aber ich hoffe, Sie bekommen das Bild.

TLDR: Wie kann ich die pass-Status von den Eltern auf das Kind als Requisiten? Gibt es eine Möglichkeit, dies zu tun über die übergeordnete Komponente?

Jede Hilfe wäre sehr geschätzt werden!

InformationsquelleAutor mre12345 | 2016-02-04
  1. 5

    Alles, was ich Tat, um dies zu beheben wurde die Verwendung der cloneElement zu erstellen, die ein Klon, und ich konnte meinen Zustand Requisiten, um diesen Klon: 

    return React.cloneElement(
        this.props.children, 
        {appName: 'Foo'}
    );
}
    • Würde es Ihnen etwas ausmachen sharing die ganze Lösung? Ich verstehe nicht, wo muss ich diesen code einfügen.
    InformationsquelleAutor mre12345
  2. 2

    Können Sie Rahmen die übergabe von Daten von übergeordneten an untergeordnete Komponente. Bitte beziehen Sie sich beispielsweise auf https://facebook.github.io/react/docs/context.html

    Diese perfekt funktioniert, selbst wenn Sie reagieren-router, ich benutze es in meiner Anwendung.

    InformationsquelleAutor Umesh
  3. 1

    lufte - wenn Sie Ihre original-code sah so aus:

    render() {
  return(
    <div className="wrapper">
    {this.props.children}
    </div>
  );
}

    dann der überarbeitete code mit Daten übergeben, die auf die Komponente der Kinder wäre:

    render() {
  var clonedChildren = React.cloneElement(this.props.children, {myProp: myValue});
  return(
    <div className="wrapper">
    {clonedChildren}
    </div>
  );
}
    InformationsquelleAutor Andy Neale
Schreibe einen Kommentar