2016-04-17 3 views
4

В настоящее время я изучаю React router v1.0, и у меня возникает путаница с передачей состояния дочерним компонентам в качестве свойств.Передача состояния дочерним компонентам как свойства

App.js

getInitialState: function(){ 
    return { 
    status: 'disconnected', 
    title: '' 
    }, 
    ... 
    , 
    render: function(){ 
    return (
     <div> 
     <Header title={this.state.title} status={this.state.status}/> 
     {React.cloneElement(this.props.children,{title:this.state.title,status:this.state.status})} 
     </div> 
    ); 

Client.js

var routes = (
    <Router history={hashHistory}> 
    <Route path="/" component={App}> 
    <IndexRoute component={Audience} /> 
    <Route path ="speaker" component={Speaker} /> 
    </Route> 
</Router> 
); 

Audience.js

render: function(){ 
    return(
    <div> 
    <h1>Audience</h1> 
    {this.props.title || "Welcome Audience"} 
    </div> 
); 
} 

Speaker.js

render: function(){ 
    return(
    <div> 
    <h1>Speaker:</h1> 
    {this.props.status || "Welcome Speaker!"} 
    </div> 
); 
    } 

Вместо того, чтобы сделать это:

{React.cloneElement(this.props.children,{title:this.state.title,status:this.state.status})} 

Есть ли что-то подобное, как это для React.cloneElement с помощью https://facebook.github.io/react/docs/jsx-spread.html оператора:

<RouteHandler {...this.state}/> 

TLDR; В принципе, я хотел бы передать все состояние своим компонентам маршрута вместо их индивидуального определения.

Любая помощь была бы принята с благодарностью!

+1

'Object.assign ({}, this.state)' – azium

ответ

1

Ну, простого ответа было бы просто нет.


Как вы можете видеть в this comment - есть несколько способов для достижения такого поведения (так, вы делаете это один из них), и, возможно, вы видели их все уже, но я Wouldn» t предложить вам использовать любой из них, если это действительно необходимо.

Вы должны действительно проверить эти дискуссии об этом в следующих потоков:

https://github.com/reactjs/react-router/issues/1857

https://github.com/reactjs/react-router/issues/1531

@ryanflorence [соавтор React-маршрутизатор]

Вы должны подумайте о своих компонентах маршрута как о точках входа в приложение , которые не знают или не заботятся о родителях, а также о паре nt не должно знать/заботиться о детях.

Обычно лучший способ справиться с этим делом было бы использовать что-то вроде redux - где все состояние вашего приложения хранится в дереве объектов и может быть легко разделяется между компонентами маршрута.

Смежные вопросы