Requisiten von der Containerkomponente zur verschachtelten Routenkomponente übergeben

-1

Wie kann ich den Status zwischen AppContainer und Home-Komponente teilen?Requisiten von der Containerkomponente zur verschachtelten Routenkomponente übergeben

Zum Beispiel möchte ich Ergebnisobjekte in den Status von AppContainer für die Weitergabe an alle anderen Komponenten setzen.

In dieser App verwende ich Redux nicht.

Ich habe versucht, React.cloneElement in AppContainer zu verwenden, sondern einen Fehler erzeugen:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

index.js

<Router history={browserHistory}> 
    <AppContainer> 
     <Route path="/" component={Home} /> 
     <Route path="search" component={Search} /> 
    </AppContainer> 
</Router>

AppContainer.js

render() { 

    return (
      <div className="containerApp"> 

       {this.props.children} 

      </div> 
    ); 
}

Quelle

2017-03-26 Gabriele Mantovani

Im Allgemeinen ist dies keine gute Idee von einem besten Stand Punkt Praxis (vor allem, weil Sie verwenden Redux nicht) .Can Sie eine Vorstellung davon, was du bist versuchen zu erreichen? Wahrscheinlich gibt es einen besseren Ansatz als den Status über den Router zu übergeben. – Teedub

Ok. Vielen Dank. Zum Beispiel in der Home-Komponente habe ich ein Suchformular und ich erhalte das Ergebnis, dann füge ich diese Ergebnisse zum Komponentenstatus hinzu. Aber ich möchte, dass dies in der Suchkomponente resultiert. Sag mir, wenn ich besser erklären ... –

Ich glaube nicht, dass Sie den Status von der Elternkomponente in den Zustand einer Kindkomponente übergeben können, entweder verwenden Sie den Kontext (der lästig ist) oder Sie übergeben den Staat als Requisiten an das Kind. das ist ziemlich einfach zu machen. warum Dinge komplizieren: P –

React.cloneElement ist der richtige Weg. Zum Beispiel:

render() { 
    const childProps = { 
     prop1: this.state.prop1 
    } 
    return (
      <div className="containerApp"> 

       {React.cloneElement(this.props.children, childProps)} 

      </div> 
    ); 
}

Wenn dies den Fehler gibt Sie vorher dann den einzigen Grund, empfangen wurden ich denken kann, ist, dass AppContainer ohne Kinder vor jeder Route Spiel gerendert wird. Sie können dies entweder mildern, bedingt in AppContainer Rendering:

render() { 
    const childProps = { 
     prop1: this.state.prop1 
    } 

    const { children } = this.props; 
    return (
      <div className="containerApp"> 

       {children && React.cloneElement(children, childProps)} 

      </div> 
    ); 
}

Quelle

2017-03-26 15:32:25

Requisiten von der Containerkomponente zur verschachtelten Routenkomponente übergeben

Antwort

Verwandte Themen