隨著互聯(lián)網(wǎng)的熱潮在不斷的火熱中，web前端的需求和工作崗位也在不斷的增加，那么今天我們就來討論有關(guān)于“在react hooks組件中父子組件怎么互相調(diào)用？”這個問題，對于這個問題下面是為大家整理的相關(guān)內(nèi)容，有感興趣的小伙們可以學習和了解一下。
1、子組件調(diào)用父組件函數(shù)方法
對于這個方法我們來看看下面這個相關(guān)的代碼：
父組件代碼部分：
//父組件
let Father=()=>{
let getInfo=()=>{
}
return ()=>{
<div>
<Children
getInfo={getInfo}
/>
</div>
}
}子組件代碼部分：
//子組件
let Children=(param)=>{
return ()=>{
<div>
<span onClick={param.getInfo}>調(diào)用父組件函數(shù)</span>
</div>
}
}在兩個代碼中，我們通過在父組件中聲明一個函數(shù)，在子組件中進行一個調(diào)用使用，可以向父組件傳參，刷新父組件的信息。
2、父組件調(diào)用子組件函數(shù)方法
在這個方法下，我們通過下面的代碼來進行了解：
父組件代碼部分：
//父組件
//需要引入useRef
import {useRef} from 'react'
let Father=()=>{
const childRef=useRef();
let onClick=()=>{
childRef.current.getInfo();
}
return ()=>{
<div>
<Children
ref={childRef}
/>
<span onClick={onClick}>調(diào)用子組件函數(shù)</span>
</div>
}
}子組件代碼部分：
//子組件
//需要引入useImperativeHandle,forwardRef
import {useImperativeHandle,forwardRef} from 'react'
let Children=(ref)=>{
useImperativeHandle(ref, () => ({
getInfo:()=>{
//需要處理的數(shù)據(jù)
}
}))
return ()=>{
<div></div>
}
}
Children = forwardRef(Children);在代碼中我們可以很清楚的知道調(diào)用的方法和步驟，但是使用?useImperativeHandle? 我們是需要配合著 ?forwardRef? 使用，要不就會出現(xiàn)以下警告：
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
總結(jié)：
我們通過代碼分享的方式簡單的說明的了“在react hooks組件中父子組件怎么互相調(diào)用？”這個問題，如果你覺得有其他更好的方法也可以和大家分享，當然更多相關(guān)的react方面的內(nèi)容和教程我們都可以在W3Cschool中進行搜索相關(guān)的內(nèi)容進行學習和了解！
