This is the third day of my participation in the August More Text Challenge

Ref forwarding is a technique that automatically passes a REF through a component to one of its children. This is usually not required for components in most applications. But it can be useful for some components, especially reusable component libraries.

As mentioned above, refs, BUT are rarely used when componentization or complex interactions are not involved!!

In the case of component reuse, there will always be times when you need a method call or state return from a child component, and then you will need to obtain some properties of the component. The creation of ref varies from project to project.

1. Take a look at the usage scenario:

  • Need to get child component methods or state (most often)
  • When you need to obtain information about a child component’s DOM element
  • When a child component needs to be in focus or out of focus

2. Five ways to create a ref

1). Class components
  • The roughest way calback (this)
/ / the parent component
import React, { Component } from "react";
import Child1 from "./Child1";

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      childRef: null}; } callback =(childRef) = > {
    // Store subcomponent instances with whatever they want
    this.setState({ childRef });
  };
  render() {
    return (
      <Child1 childRef={this.callback} />); }}export default Index;

/ / child component
import React, { Component } from "react";
class Index extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    // Return this instance of its child directly
    this.props.childRef(this);
  }
  render() {
    return (
      <div className="border">
        <h3>child1</h3>
      </div>); }}export default Index;
Copy the code
  • High order component wrappedComponentRef
// The parent component is written like this
<Child2 wrappedComponentRef={(ref) = > {
  this.childRef = ref
}} />
// The child component is a higher-order component
// Decorator or wrap or etc
@Form.create()
class Index extends Component {
Copy the code
  • CreateRef ()
// Parent component -- gets the child component instance
const ref = React.createRef();
<Child3 ref={ref} />
Copy the code
2). Function components
  • React.useRef()
// Get the DOM element instance
const Index = () = > {
const ref4 = useRef();
 const handleClick = () = > {
    console.log(ref4, "child4");
  };
  return (
    <div>
      <Button ref={ref4} onClick={handleClick}>Click on the</Button>
    </div>
  );
};
Copy the code
  • React.useImperativeHandle()
/ / the parent component
const ref4 = useRef();
<Child4 ref={ref4} />
/ / child component
import React, { useImperativeHandle } from "react";
const Index = React.forwardRef((props, ref) = > {
  // The object returned here is the ref4 instance created by the parent component. The required methods or properties can be registered directly
  useImperativeHandle(ref, () = > ({
    a: 1,}));return (
    <div className="border">
      <h3>child4</h3>
    </div>
  );
});
export default Index;
Copy the code

The above are several ways to create ref. It is very annoying to check relevant information every time you use REF. Therefore, there is a pure dry article about REF. No matter you are facing the old project of class or the new project of hook, it should help you.