react hooks中父子组件如何互相调用

本篇内容主要讲解"react hooks中父子组件如何互相调用"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"react hooks中父子组件如何互相调用"吧!

1、子组件调用父组件函数方法

对于这个方法我们来看看下面这个相关的代码：

父组件代码部分：

//父组件let Father=()=>{    let getInfo=()=>{            }    return ()=>{        
                    
    }}

子组件代码部分：

//子组件let Children=(param)=>{    return ()=>{        
            调用父组件函数        
    }}

在两个代码中，我们通过在父组件中声明一个函数，在子组件中进行一个调用使用，可以向父组件传参，刷新父组件的信息。

2、父组件调用子组件函数方法

在这个方法下，我们通过下面的代码来进行了解：

父组件代码部分：

//父组件//需要引入useRefimport {useRef} from 'react'let Father=()=>{    const childRef=useRef();    let onClick=()=>{        childRef.current.getInfo();    }    return ()=>{        
                        调用子组件函数        
    }}

子组件代码部分：

//子组件 //需要引入useImperativeHandle,forwardRefimport {useImperativeHandle,forwardRef} from 'react'let Children=(ref)=>{    useImperativeHandle(ref, () => ({        getInfo:()=>{            //需要处理的数据        }    }))    return ()=>{        
    }}Children = forwardRef(Children);

在代码中我们可以很清楚的知道调用的方法和步骤，但是使用useImperativeHandle 我们是需要配合着 forwardRef 使用，要不就会出现以下警告：

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

到此，相信大家对"react hooks中父子组件如何互相调用"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！