React 调用子组件的函数(函数)

原文:React Hooks-Calling Child Component Function From Parent Component

 

In this article we’re are assuming that you are somewhat familiar with React Hooks

For calling Child Component function from parent component in hooks we are using React.forwardRef and React.useImperativeHandlehooks from React. Now let us know briefly about these two. What are they? How are they used? And the most important question, how are we going to use them? So let’s get started!

React.forwardRef

React.forwardRef creates a React component that forwards the ref attribute, which it receives, to another component below in the tree. So, in simple words forwardRef creates such a component which receives a ref attribute from its parent component and forwards it to the components down in the hierarchy.

 

Arguments and return type: React calls this function with two arguments one is props and the other is ref. This returns a react node something like this.

 

 

React.useImperativeHandle

When we use useRef then instance value of component is generated with which ref is used, that instance value can be used to manipulate the DOM element, now React.useImperativeHandle customizes the instance value that is exposed to parent components. It is used with forward ref otherwise it will throw an error Cannot add property current, object is not extensible.

 

Demo: Calling child function from parent in React Hooks

 

 

 

So let us create a parent component first
So we have created a component with a button to call the child function later on.

 

 

 

Now, lets create a child component using forwardRef .
A child component is ready along with a function in which it alerts a message “Child function called”, this function is named as showAlert with no arguments, using useImperativeHandle as we have discussed above about the useImperativeHandle and the forwardRef hooks in React.

Our output is still the same because the child component is not rendered yet.

 

 

Here comes the important part to call the child function.
Now we will just render the child component in the parent and create a ref using React.useRefwith that the showAlert() function will be called.

Child component is rendered and a ref is created using React.useRefnamed childRef. The button we created in parent component is now used to call the child component function childRef.current.showAlert();

 

 

Conclusion

As we know useRef() returns a mutable ref object whose .current property is initialized to the passed argument. The returned object will persist for the full lifetime of the component. Now, the function showAlert() is initialized in .current property of ref, which can be used anywhere in the component.

 

 

posted @   PanPan003  阅读(1301)  评论(0编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?
点击右上角即可分享
微信分享提示