Передача состояния в качестве реквизита от родителя к ребенку в реакторе?

Я использую React-Router в течение последних нескольких дней, и Iv'e любил его! Одна из проблем, с которой я столкнулся, заключается в том, что я не могу найти лучший способ передать состояние из моего родительского компонента в мой дочерний компонент. Iv'e смотрел несколько переполнений стека и сообщений в блогах, но я не могу найти то, что хотел Iv'e. Вот очень упрощенный пример того, что я ищу.

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>

Очевидно, это очень упрощенная версия того, что я пытаюсь выполнить, но я надеюсь, что вы получите картину.

TL;DR: Как передать состояние от родителя к дочернему в качестве реквизита? Есть ли способ сделать это через родительский компонент?

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

Ответ 1

Все, что я сделал, чтобы исправить это, было использование cloneElement для создания клона, и я мог бы добавить реквизит штата к этому клону:

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

Ответ 2

Вы можете использовать контекст для передачи данных от родительского к дочернему компоненту. Пожалуйста, обратитесь к примеру https://facebook.github.io/react/docs/context.html

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

Ответ 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>
  );
}