Is it possible to get ref of props.children?

user_2260919 0
Viewed 14060

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>
reactjs
2 Answers

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

user_55216070

This is where forwardRef can be used:

class GetRef extends React.Component {
    render() {
        console.log(this.props.forwardRef)
    }
}

const ref = React.createRef();
<Child forwardRef={ref} />

Alternatively, you may also use:

<Child ref="childRef" .../>


// In the parent component
React.findDOMNode(this.refs.childRef)

But take a look at Exposing DOM Refs to Parent Components to know whether to use ref or not:

In rare cases, you might want to have access to a child’s DOM node from a parent component. This is generally not recommended because it breaks component encapsulation, but it can occasionally be useful for triggering focus or measuring the size or position of a child DOM node.

user_21387520
Related