why add ref to child ref can only get a component instance rather than a DOM node?

Question

I am reading this doc, where it says:

While you could add a ref to the child component, this is not an ideal solution, as you would only get a component instance rather than a DOM node. Additionally, this wouldn’t work with functional components.

can anyone explain why?

Answer 1

React refs are javascript objects that store references to an underlying element. This underlying element can be a different React component or an HTML DOM element. Currently, React saves the reference to the underlying element to a property called current on the ref. So you actually can access a DOM node with a ref if you use that property.

For example, let's say you had a class component with a ref object called "myTextInput". As of React v16.3 you generally do this by assinging it in a class constructor and calling the createRef() method. Then, if that component had a render method of:

<input type="text" ref={this.myTextInput} />

You could access the DOM node directly with the current property on it. For instance, you could focus it in a function on the class by calling:

this.myTextInput.current.focus();

You would be directly accessing the DOM node here. Altogether, this component would look like:

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.myTextInput = React.createRef();
  }

  focusInput = () => {
    this.myTextInput.current.focus();
  }

  render() {
    return (
      <input type="text" ref={this.myTextInput} />
    );
  }
}

The paragraph you cite deals with needing to access refs from a parent component (or a component farther up the chain) on a child component. For instance, let's say you needed to be able to focus that input on a different component instead of inside itself. How would you do that?

It is valid to assign a ref to custom component, but it will only access that component's instance. For example, let's say we have our <CustomTextInput /> component from above and wanted to be able to focus that input in a parent element. You can pass a ref to the child component in the parent like this.

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.myChildRef = React.createRef();
  }

  render() {
    return (
      <CustomTextInput ref={this.myChildRef} />
    );
  }
}

This ref would only refer to the instance of <CustomTextInput /> but it would NOT refer to the underlying <input /> inside of it. This is what that paragraph means when it talks about refs on child components referring to instances and not DOM nodes. Imagine that our <CustomTextInput /> component had multiple <input /> elements inside of it. How could the parent ref possibly know which input it should get assigned to?

Instead of using refs in this way, React has several different ways to access a ref from a parent component. As of React v16.3 they added a new ref forwarding API where you explicitly define classes to expect refs getting passed to them from parents. Prior to React v16.3 you had to create a ref on the parent class and pass it down as a custom prop to be used as a ref on the lower-level DOM node. This approach is outlined here.