是否可以获取props.children的参考？

Question

我想获取子组件的引用。做这个的最好方式是什么？

class Child extends React.Component {
  render() {
    return <div>Child</div>;
  }
}   

class GetRef extends React.Component {

  componentDidMount() {
     console.log(this.props.children.ref)
  }


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

编辑：所以我可以这样使用它

<GetRef><Child/></GetRef>

Answer 1

我假设GetRef孩子只有一个孩子，那么您可以child使用此代码检索唯一组件的引用

class Child extends React.Component {

  render() {
    return <div>Child</div>;
  }
}  

class GetRef extends React.Component {

  componentDidMount() {
    console.log(this.ref);
  }

  render() {
    const childElement = React.Children.only(this.props.children);

    return React.cloneElement(
      childElement, 
      { ref: el => this.ref = el }
    );
  }

}

class App extends Component {

  render() {
    return <GetRef><Child/></GetRef>;
  }

}

这是关于stackblitz 的完整示例

如果this.props.children有多个子代，则需要遍历子代并将所有子代存储refs到一个数组中