The ref attribute is actually used to get DOM nodes, for example:

import React from 'react'

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
  }
   render() {
     return (
       <div>
          <h1>ref attribute</h1>
          <input type="text" ref={node => this.inputNode = node}/>
       </div>
     )
   }
}

export default RefComponent;

Use the callback function returned by the ref attribute to get the DOM node, so that after the page rendering is completed, input will focus. Ref can bind strings in addition to the callback function, but in the later stage react will no longer maintain the string form, which will not be explained in detail here, so use the callback function to get the dom.

In addition to focusing on input, you can also get the contents of the current DOM node, as follows:

import React from 'react'

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
     console.log(this.texthtml);
     console.log(this.texthtml.innerHTML);
  }
   render() {
     return (
       <div>
          <h1>ref attribute</h1>
          <input type="text" ref={node => this.inputNode = node}/>
          <div ref={node => this.texthtml = node}>Hello</div>
       </div>
     )
   }
}

export default RefComponent;

The output result is:

< div > Hello < / div >
Hello

Here, we also find a problem. Although it is very convenient for ref to get DOM nodes, if ref is used more, it will be difficult to maintain in the later stage. Therefore, try to use as little as possible.

In addition to HTML tags, ref s can also be added to components, such as:

import React from 'react'
import Button from './button.js'

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
     console.log(this.texthtml);
     console.log(this.texthtml.innerHTML);
     console.log(this.buttonNode);
  }
   render() {
     return (
       <div>
          <h1>ref attribute</h1>
          <input type="text" ref={node => this.inputNode = node}/>
          <div ref={node => this.texthtml = node}>Hello</div>
          <Button ref={button => this.buttonNode = button}/>
       </div>
     )
   }
}

export default RefComponent;

But at this time, this.buttonNode gets a Button, the component instance DOM

Note a problem here. ref can only be used in the components defined by a class, not in function components, because there is no instance for function components. For example, the following writing method is wrong:

import React from 'react'

function TestComponent() {
   return (
    <div>Function component</div>
   );
}

class RefComponent extends React.Component {
  componentDidMount(){
     console.log(this.testCom);
  }
   render() {
     return (
       <div>
          <h2>Function component</h2>
          <TestComponent ref={node => this.testCom = node}/>
       </div>
     )
   }
}

export default RefComponent;

If it is written in this way, an error will be reported, and this.testCom is undefined, because the instance of the function component cannot be obtained at this time, so note the above writing method

Summary: ref can add HTML tags and class components, but not function components