प्रतिक्रिया राउटर और this.props.children - इस.प्रॉप.चिल्डेन

Question

पर राज्य कैसे पास करें मैं पहली बार रिएक्ट-राउटर का उपयोग कर रहा हूं और मुझे नहीं पता कि इसमें अभी तक कैसे सोचना है। यहां बताया गया है कि मैं अपने घटकों को नेस्टेड मार्गों में कैसे लोड कर रहा हूं।

प्रवेश बिंदु .js

ReactDOM.render(
    <Router history={hashHistory} > 
     <Route path="/" component={App}> 
      <Route path="models" component={Content}> 
     </Route> 
    </Router>, 
    document.getElementById('app') 
); 

App.js

render: function() { 
    return (
     <div> 
     <Header /> 
     {this.props.children} 
     </div> 
    ); 
    } 

तो मेरी अनुप्रयोग के बच्चे सामग्री घटक मैं में भेज दिया है। मैं फ्लक्स और उपयोग कर रहा हूँ मेरी App.js में राज्य है और परिवर्तनों के लिए सुनता है, लेकिन मुझे नहीं पता कि उस राज्य को इस.प्रॉप.चिल्डेरेन को कैसे पास किया जाए। प्रतिक्रिया-राउटर का उपयोग करने से पहले मेरे ऐप.जेएस सभी बच्चों को स्पष्ट रूप से परिभाषित करता है, इसलिए गुजरने वाला राज्य प्राकृतिक था लेकिन मुझे नहीं पता कि अब इसे कैसे किया जाए।

Answer 1

, सहायक तरीकों आप this.props.children

render: function() { 
    var children = React.Children.map(this.props.children, function (child) { 
    return React.cloneElement(child, { 
     foo: this.state.foo 
    }) 
    }) 

    return <div>{children}</div> 
} 

करने के लिए राज्य, सहारा और जो कुछ भी जोड़ सकते हैं प्रतिक्रिया तो अपने बच्चे घटक रंगमंच की सामग्री के माध्यम से इस का उपयोग कर सकते this.props.foo की एक जोड़ी का उपयोग करना।

Answer 2

आप इसे पूरा करने के लिए React method "cloneElement" का उपयोग कर सकते हैं। जब आप तत्व क्लोन करते हैं, तो आप उस समय प्रोप में गुजर सकते हैं। अपने प्रस्तुत करने में मूल के बजाय क्लोन का उपयोग करें। उदाहरण:

render: function() { 
    var childrenWithProps = React.cloneElement(this.props.children, {someProp: this.state.someProp}); 
    return (
     <div> 
     <Header /> 
     {childrenWithProps} 
     </div> 
    ); 
    } 

Answer 3

Context का उपयोग करने का विकल्प भी है। मार्ग घटकों में राउटर ऑब्जेक्ट तक पहुंच प्रदान करने के लिए प्रतिक्रिया-राउटर इस पर निर्भर करता है।

मैं जल्दी से एक साथ एक उदाहरण codepen पर संदर्भों का उपयोग कर रख:

एक और answer मैं एक ऐसी ही सवाल पर दिया से

। MainLayout कुछ गुणों को परिभाषित करता है जिनका उपयोग बच्चों द्वारा संदर्भ का उपयोग करके किया जा सकता है: users और widgets। इन गुणों का उपयोग UserList और WidgetList घटकों द्वारा किया जाता है। ध्यान दें कि contextTypes ऑब्जेक्ट में संदर्भ से उन्हें क्या पहुंचने की आवश्यकता है, उन्हें परिभाषित करने की आवश्यकता है।

var { Router, Route, IndexRoute, Link } = ReactRouter 

var MainLayout = React.createClass({ 
    childContextTypes: { 
    users: React.PropTypes.array, 
    widgets: React.PropTypes.array, 
    }, 
    getChildContext: function() { 
    return { 
     users: ["Dan", "Ryan", "Michael"], 
     widgets: ["Widget 1", "Widget 2", "Widget 3"] 
    }; 
    }, 
    render: function() { 
    return (
     <div className="app"> 
     <header className="primary-header"></header> 
     <aside className="primary-aside"> 
      <ul> 
      <li><Link to="/">Home</Link></li> 
      <li><Link to="/users">Users</Link></li> 
      <li><Link to="/widgets">Widgets</Link></li> 
      </ul> 
     </aside> 
     <main> 
      {this.props.children} 
     </main> 
     </div> 
    ) 
    } 
}) 

var Home = React.createClass({ 
    render: function() { 
    return (<h1>Home Page</h1>) 
    } 
}) 

var SearchLayout = React.createClass({ 
    render: function() { 
    return (
     <div className="search"> 
     <header className="search-header"></header> 
     <div className="results"> 
      {this.props.children} 
     </div> 
     <div className="search-footer pagination"></div> 
     </div> 
    ) 
    } 
}) 

var UserList = React.createClass({ 
    contextTypes: { 
    users: React.PropTypes.array 
    }, 
    render: function() { 
    return (
     <ul className="user-list"> 
     {this.context.users.map(function(user, index) { 
      return <li key={index}>{user}</li>; 
     })} 
     </ul> 
    ) 
    } 
}) 

var WidgetList = React.createClass({ 
    contextTypes: { 
    widgets: React.PropTypes.array 
    }, 
    render: function() { 
    return (
     <ul className="widget-list"> 
     {this.context.widgets.map(function(widget, index) { 
      return <li key={index}>{widget}</li>; 
     })} 
     </ul> 
    ) 
    } 
}) 

var Routes = React.createClass({ 
    render: function() { 
    return <Router> 
     <Route path="/" component={MainLayout}> 
      <IndexRoute component={Home} /> 
      <Route component={SearchLayout}> 
      <Route path="users" component={UserList} /> 
      <Route path="widgets" component={WidgetList} /> 
      </Route> 
     </Route> 
     </Router>; 
    } 
}) 

ReactDOM.render(<Routes/>, document.getElementById('root'))