“This is the 11th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

In some business scenarios, we need to get the state or method of the child component in the parent component. In Vue, you can define a ref for the child and then get methods or attributes in the child in the parent via this.$refs.ref. In React, you can also get the state or method of a subcomponent by using a ref.

Now, let’s look at how to get the state or method of the child component in the parent component.

The following methods to get the state or method of a child component only apply to a class component

Method 1: Add ref attributes to child components

First add the attribute ref=’child’ to the child component (called in the parent component)

<Child ref='child' />
Copy the code

We then use the form this.refs.child in the parent to get the child’s state or method

ClickHandle = () => {// Get state console.log for child components (' This is child state: ', this.refs.child.state) // Get the child component.this.refs.child.say ()}Copy the code

Full example: codesandbox.io/s/get-child…

Note: React may remove string Refs in future versions. For example, this.refs.child is used as a string Refs. A callback function or createRef() is recommended instead.

In addition to assigning a string to the ref attribute, we can also assign a callback function to ref:

Append (ref ={(ref) => (this.child = ref)}

<Child ref={(ref) => (this.child = ref)} />
Copy the code

Then use this.child-state or this.child-methoname in the parent component to get the state or method of the child component:

clickHandle = () => {
  console.log("this is child state: ", this.child.state);
  this.child.say();
};
Copy the code

Full example: codesandbox.io/s/get-child…

Method 2: Add an onRef attribute to the child component

This method actually gets the this instance of the child component via the props + callback

OnRef ={(ref) => this.child = ref}

<Child onRef={(ref) => this.child = ref } />
Copy the code

The ref argument in the onRef callback is the child component’s exposed this object, which is assigned to the parent component’s child property.

We then expose the child’s this object to the parent in the constructor constructor of the child:

constructor(props: any) {
  super(props)
  if (this.props.onRef) this.props.onRef(this)
}
Copy the code

Alternatively, you can expose the child’s this object to the parent component in the child’s componentDidMount lifecycle function:

componentDidMount() { if (this.props.onRef) { this.props.onRef(this); }}Copy the code

You then get the child’s state or method in the parent using this.child.xxx

clickHandle = () => {
  console.log("this is child state: ", this.child.state);
  this.child.say();
};
Copy the code

Full example: codesandbox.io/s/get-child…

Method 3: Create a ref container using createRef()

Start by creating the ref container in the parent component:

childRef: any = React.createRef();
Copy the code

Then add the ref attribute to the child component: ref={this.childref}

<Child ref={this.childRef}/>
Copy the code

We can then use this.childref. current in the parent component to get the state or method of the child component:

clickHandle = () => {
  console.log("this is child state: ", this.childRef.current.state);
  this.childRef.current.say();
};
Copy the code

Full example: codesandbox.io/s/get-child…