Shulou(Shulou.com)06/01 Report--

This article focuses on "how to call each other between parent and child components in react hooks". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to call each other in react hooks.

1. The child component calls the parent component function method

For this method, let's take a look at the following related code:

Part of the parent component code:

/ / parent component let Father= () = > {let getInfo= () = > {} return () = > {}}

Subcomponent code section:

/ / Child component let Children= (param) = > {return () = > {call parent component function}}

In the two code, we can pass parameters to the parent component and refresh the parent component's information by declaring a function in the parent component and making a call in the child component.

2. The parent component calls the subcomponent function method.

Under this method, we learn about it through the following code:

Part of the parent component code:

/ / parent component / / need to introduce useRefimport {useRef} from 'react'let Father= () = > {const childRef=useRef (); let onClick= () = > {childRef.current.getInfo ();} return () = > {invoke subcomponent function}}

Subcomponent code section:

/ / Sub-components / / need to introduce useImperativeHandle,forwardRefimport {useImperativeHandle,forwardRef} from 'react'let Children= (ref) = > {useImperativeHandle (ref, () = > ({getInfo: () = > {/ / data to be processed}) return () = > {}} Children= forwardRef (Children)

We can clearly know the methods and steps to call in the code, but we need to use useImperativeHandle with forwardRef, or there will be the following warning:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef ()? At this point, I believe you have a deeper understanding of "how parent and child components call each other in react hooks". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.