रिएक्ट-राउटर में माता-पिता से बच्चे के प्रोप के रूप में राज्य को पास करना?

Question

मैं पिछले कुछ दिनों से रिएक्ट-राउटर का उपयोग कर रहा हूं और मैं इसे प्यार कर रहा हूं! एक समस्या यह है कि मेरे पास यह है कि मुझे अपने मूल घटक से राज्य को अपने बच्चे के घटक में पास करने का सबसे अच्छा तरीका नहीं मिल रहा है। मैं कई स्टैक ओवरफ़्लो और ब्लॉग पोस्ट देख रहा हूं लेकिन मुझे लगता है कि मैं क्या चाहता हूं। मैं जो खोज रहा हूं उसके बारे में यहां एक बहुत ही सरल उदाहरण दिया गया है।

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> 

जाहिर है यह मैं क्या हासिल करने की कोशिश कर रहा हूँ की एक बहुत ही सरलीकृत संस्करण है, लेकिन मुझे आशा है कि आप चित्र मिलता है।

टीएलडीआर: मैं माता-पिता से बच्चे को प्रोप के रूप में कैसे पास करूं? क्या मूल घटक के माध्यम से ऐसा करने का कोई तरीका है?

किसी भी मदद की सराहना की जाएगी!

Answer 1

आप पैरेंट से बच्चे घटक तक डेटा पास करने के लिए संदर्भ का उपयोग कर सकते हैं। उदाहरण के लिए https://facebook.github.io/react/docs/context.html

यह पूरी तरह से काम करता है भले ही आप प्रतिक्रिया-राउटर का उपयोग करते हैं, मैं इसे अपने आवेदन में उपयोग कर रहा हूं।

Answer 2

सभी मैं इसे ठीक करने के लिए किया था एक क्लोन बनाने के लिए cloneElement का उपयोग करें और मुझे लगता है कि क्लोन करने के लिए मेरे राज्य रंगमंच की सामग्री जोड़ सकते हैं:

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

Answer 3

lufte - अगर आपकी मूल कोड इस तरह देखा:

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

तो डेटा घटक के बच्चों को पास किए जाने के साथ संशोधित कोड होगा:

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