Question

过去几天我一直在使用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：如何将状态从父级传递给子级作为道具？有没有办法通过父组件来做到这一点？

非常感谢任何帮助！

Answer 1

我所做的就是使用cloneElement创建克隆，我可以将我的状态道具添加到该克隆：

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

Answer 2

您可以使用上下文将数据从父组件传递到子组件。请参阅https://facebook.github.io/react/docs/context.html

中的示例

即使您使用react-router，我也能在我的应用程序中使用它。

Answer 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>
  );
}

在React-Router中将状态作为父级传递给子级？

3 个答案: