嵌套路由的父级如何获得对嵌套子组件的引用？

Question

我有路线

<Router>
  <Route path="browse" component={Browse}>
    <Route path="foo" component={Foo} />
    <Route path="bar" component={Bar} />
  </Route>
</Router>

Browse是一个包含渲染函数

的包装器

render() {
  return this.props.children;
}

如何获取对子组件（Bar或Foo）的引用？

当我检查this.props.children时，我只看到Route组件。我需要传递给Route组件的组件实例

Answer 1

想出来，使用React.cloneElement将ref属性传递给子节点：

render () {
  return React.cloneElement(this.props.children || <div />, { key: key, ref: 'child' });
}

然后可以使用this.refs.child

引用孩子