在react hooks组件中父子组件怎么互相调用？父子组件相互调用的方法分享！

随着互联网的热潮在不断的火热中，web前端的需求和工作岗位也在不断的增加，那么今天我们就来讨论有关于“在react hooks组件中父子组件怎么互相调用？”这个问题，对于这个问题下面是为大家整理的相关内容，有感兴趣的小伙们可以学习和了解一下。

---

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

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

父组件代码部分：

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

子组件代码部分：

//子组件
let Children=(param)=>{
    return ()=>{
        <div>
            <span onClick={param.getInfo}>调用父组件函数</span>
        </div>
    }
}

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

---

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

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

父组件代码部分：

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

子组件代码部分：

//子组件 
//需要引入useImperativeHandle,forwardRef
import {useImperativeHandle,forwardRef} from 'react'
let Children=(ref)=>{
    useImperativeHandle(ref, () => ({
        getInfo:()=>{
            //需要处理的数据
        }
    }))
    return ()=>{
        <div></div>
    }
}
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组件中父子组件怎么互相调用？”这个问题，如果你觉得有其他更好的方法也可以和大家分享，当然更多相关的react方面的内容和教程我们都可以在W3Cschool中进行搜索相关的内容进行学习和了解！