react hooks中父子組件如何互相調用

本篇內容主要講解“react hooks中父子組件如何互相調用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“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中父子組件如何互相調用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！