React router and this.props.children - jak przekazać stan this.props.children

Question

Używam React-routera po raz pierwszy i nie wiem jak jeszcze w nim myśleć. Oto jak ładuję moje komponenty w zagnieżdżonych trasach.

punkt wejścia 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> 
    ); 
    } 

Więc dziecko mojej aplikacji jest składnikiem treści wysłałem. Używam Flux i My App.js ma stan i nasłuchuje zmian, ale nie wiem, jak przekazać ten stan do this.props.children. Przed użyciem routera reagującego mój app.js definiuje jawnie wszystkie dzieci, więc przekazanie stanu było naturalne, ale nie widzę teraz, jak to zrobić.

Answer 1

Korzystanie parę React metody pomocnika można dodać stan, rekwizyty i cokolwiek innego 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> 
} 

Następnie komponent dziecko może uzyskać dostęp do tego za pomocą rekwizytów, this.props.foo.

Answer 2

Do wykonania tej czynności można użyć React method "cloneElement". Kiedy sklonujesz element, możesz w tym czasie przekazać rekwizyty. Użyj klonu zamiast oryginału w twoim renderowaniu fn. np .:

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

Answer 3

Istnieje również możliwość użycia Context. React-Router polega na umożliwieniu dostępu do obiektu Router w komponentach trasy.

Z innej answer dałem na podobnym pytaniem:

Szybko zebrała przykład przy użyciu kontekstów na codepen. MainLayout definiuje niektóre właściwości, które mogą być używane przez dzieci w kontekście: users i widgets. Te właściwości są używane przez komponenty UserList i WidgetList. Zauważ, że muszą zdefiniować, czego potrzebują, aby uzyskać dostęp z kontekstu w obiekcie 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'))