隨著互聯(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)題,如果你覺(jué)得有其他更好的方法也可以和大家分享,當(dāng)然更多相關(guān)的react方面的內(nèi)容和教程我們都可以在W3Cschool中進(jìn)行搜索相關(guān)的內(nèi)容進(jìn)行學(xué)習(xí)和了解!