javascript - 在React-Router中将状态作为 Prop 从父项传递给子项？

在过去的几天里，我一直在使用React-Router，我一直很喜欢它!我一直遇到的一个问题是，我找不到将状态从父组件传递给子组件的最佳方法。我一直在看几个堆栈溢出和博客文章，但我似乎找不到我想要的东西。这是关于我要寻找的内容的简化示例。

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>

显然，这是我要完成的工作的非常简化的版本，但我希望您能理解。

TLDR:如何将状态从 parent 传递给 child 作为 Prop ？有什么办法可以通过父组件来做到这一点？

任何帮助将不胜感激!

最佳答案

为了解决这个问题，我要做的就是使用cloneElement创建一个克隆，然后将状态 Prop 添加到该克隆中:

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

关于javascript - 在React-Router中将状态作为 Prop 从父项传递给子项？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35192734/