快捷導(dǎo)航

React父子組件互相通信的實現(xiàn)示例

更新時間：2023年11月28日 14:54:28 作者：白鯨ld

React中是單向數(shù)據(jù)流,數(shù)據(jù)只能從父組件通過屬性的方式傳給其子組件,本文主要介紹了React父子組件互相通信的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下

在寫項目的時候遇到了父子組件互相調(diào)用對方的方法，然后知道用什么邏輯寫，但是就是沒寫對過，開始用的props和ref,但是報錯就去用的context,context在引用的時候還是報錯，所以最后還是用的props和ref,下邊是實現(xiàn)的案例。

父組件 Father.tsx

import React, { useState, useRef } from 'react';
import Child from './components/child'
const Father = ()=>{
	const childRef = useRef<any>();
	const params = {所需參數(shù)....}
	const dataList = async (params: any) => {
        try {
            const { ret, data } = await specialList(params);
            if (ret === 1) {
                處理的邏輯....
            }
        } catch (error) {
            console.log(error);
        }
    }
    //調(diào)用子組件的方法，看要在哪里調(diào)用就在哪里使用
	await childRef?.current.infosItem();
	return (
		<>
			<Child datalist={dataList} ref={childRef}/>
		</>
	)
}
export default Father;

子組件：child.tsx

import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
const Child = (props: any,ref: any)=>{
	const { datalist } = props;
	const infosItem = async () => {
        try {
            const { ret, data } = await infos(params);
            if (ret === 1) {
      			//處理業(yè)務(wù)邏輯...
            }
        } catch (error) {
           console.log(error);
        }
    };
    const par = {datalist需要的參數(shù)};
    await datalist(par) //在需要的時候調(diào)用
    //將這個方法暴露出來，讓父組件可以調(diào)用
    useImperativeHandle(ref, ()=>({
        infosItem
    }));
    return (
    	<></>
	)
}
export default forwardRef(Child)

我這個業(yè)務(wù)是編輯，就是子組件編輯之后父組件的數(shù)據(jù)要變化，父組件編輯子組件也要變化，我開始認(rèn)為就是點擊編輯框上的確定之后調(diào)用對方方法，但是發(fā)現(xiàn)并沒有起效果，一直認(rèn)為還是自己通信問題，后來換了一下調(diào)用的地方，就起效果了，要放在調(diào)用編輯接口那個地方，因為異步問題。目前就用的props和ref來實現(xiàn)父子之間的通信的，還有其他通信方式，等用到了再更新吧。
useImperativeHandle可以看這個Hook具體含義。

到此這篇關(guān)于React父子組件互相通信的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)React父子組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: