Is it possible to get ref of props.children?

Question

I want to get ref of Child component. What is the best way to do this?

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
  }
}

Edit: So I can use it like this

<GetRef><Child/></GetRef>

Answer 1

I assumed that GetRef children has only one child, then you can retrieve the ref of the only child component with this code

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

}

Here is the complete example on stackblitz

If this.props.children has more than one child, you will need to iterate over the children and store all the refs into an array