Passaggio dello stato come oggetti di scena da padre a figlio in React-Router?

Question

Ho usato React-Router negli ultimi due giorni e Iv l'ho amato! Un problema che Iv sta avendo è che non riesco a trovare il modo migliore per passare lo stato dal mio componente padre al mio componente figlio. Ho guardato diversi stack overflow e post sul blog ma non riesco a trovare quello che Iv'e voleva. Ecco un esempio molto più semplice di ciò che sto cercando.

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> 

Ovviamente questa è una versione molto semplificata di quello che sto cercando di realizzare, ma spero che si ottiene l'immagine.

TLDR: Come si passa lo stato da padre a figlio come oggetti di scena? C'è un modo per farlo tramite il componente principale?

Qualsiasi aiuto sarebbe molto apprezzato!

Answer 1

È possibile utilizzare il contesto per passare i dati dal componente principale a quello secondario. Si prega di fare riferimento a https://facebook.github.io/react/docs/context.html

Questo funziona perfettamente anche se si utilizza react-router, lo sto usando nella mia applicazione.

Answer 2

Tutto quello che ho fatto per risolvere questo problema è stato utilizzare il cloneElement per creare un clone e potrei aggiungere i miei oggetti di scena statali a quello clone: ​​

return React.cloneElement(
     this.props.children, 
     {appName: 'Foo'} 
    ); 
} 

Answer 3

Lüfte - se il codice originale si presentava così:

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

quindi il codice rivisto con i dati che vengono passati ai figli del componente sarebbe:

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