在react hooks組件中父子組件怎么互相調(diào)用？父子組件相互調(diào)用的方法分享！

隨著互聯(lián)網(wǎng)的熱潮在不斷的火熱中，web前端的需求和工作崗位也在不斷的增加，那么今天我們就來討論有關(guān)于“在react hooks組件中父子組件怎么互相調(diào)用？”這個(gè)問題，對(duì)于這個(gè)問題下面是為大家整理的相關(guān)內(nèi)容，有感興趣的小伙們可以學(xué)習(xí)和了解一下。

1、子組件調(diào)用父組件函數(shù)方法

對(duì)于這個(gè)方法我們來看看下面這個(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è)代碼中，我們通過在父組件中聲明一個(gè)函數(shù)，在子組件中進(jìn)行一個(gè)調(diào)用使用，可以向父組件傳參，刷新父組件的信息。

2、父組件調(diào)用子組件函數(shù)方法

在這個(gè)方法下，我們通過下面的代碼來進(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ǎn)單的說明的了“在react hooks組件中父子組件怎么互相調(diào)用？”這個(gè)問題，如果你覺得有其他更好的方法也可以和大家分享，當(dāng)然更多相關(guān)的react方面的內(nèi)容和教程我們都可以在W3Cschool中進(jìn)行搜索相關(guān)的內(nèi)容進(jìn)行學(xué)習(xí)和了解！