快捷導(dǎo)航

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

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

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

在寫(xiě)項(xiàng)目的時(shí)候遇到了父子組件互相調(diào)用對(duì)方的方法，然后知道用什么邏輯寫(xiě)，但是就是沒(méi)寫(xiě)對(duì)過(guò)，開(kāi)始用的props和ref,但是報(bào)錯(cuò)就去用的context,context在引用的時(shí)候還是報(bào)錯(cuò)，所以最后還是用的props和ref,下邊是實(shí)現(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) //在需要的時(shí)候調(diào)用
    //將這個(gè)方法暴露出來(lái)，讓父組件可以調(diào)用
    useImperativeHandle(ref, ()=>({
        infosItem
    }));
    return (
    	<></>
	)
}
export default forwardRef(Child)

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

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

您可能感興趣的文章: