隨著互聯(lián)網(wǎng)的熱潮在不斷的火熱中，web前端的需求和工作崗位也在不斷的增加，那么今天我們就來(lái)討論有關(guān)于“在react hooks組件中父子組件怎么互相調(diào)用？”這個(gè)問(wèn)題，對(duì)于這個(gè)問(wèn)題下面是為大家整理的相關(guān)內(nèi)容，有感興趣的小伙們可以學(xué)習(xí)和了解一下。
1、子組件調(diào)用父組件函數(shù)方法
對(duì)于這個(gè)方法我們來(lái)看看下面這個(gè)相關(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>
}
}在兩個(gè)代碼中，我們通過(guò)在父組件中聲明一個(gè)函數(shù)，在子組件中進(jìn)行一個(gè)調(diào)用使用，可以向父組件傳參，刷新父組件的信息。
2、父組件調(diào)用子組件函數(shù)方法
在這個(gè)方法下，我們通過(guò)下面的代碼來(lái)進(jìn)行了解：
父組件代碼部分：
//父組件
//需要引入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? 使用，要不就會(huì)出現(xiàn)以下警告：
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
總結(jié)：
我們通過(guò)代碼分享的方式簡(jiǎn)單的說(shuō)明的了“在react hooks組件中父子組件怎么互相調(diào)用？”這個(gè)問(wèn)題，如果你覺得有其他更好的方法也可以和大家分享，當(dāng)然更多相關(guān)的react方面的內(nèi)容和教程我們都可以在W3Cschool中進(jìn)行搜索相關(guān)的內(nèi)容進(jìn)行學(xué)習(xí)和了解！
