React父子組件互相通信的實(shí)現(xiàn)示例
在寫項(xiàng)目的時(shí)候遇到了父子組件互相調(diào)用對方的方法，然后知道用什么邏輯寫，但是就是沒寫對過，開始用的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è)方法暴露出來，讓父組件可以調(diào)用
useImperativeHandle(ref, ()=>({
infosItem
}));
return (
<></>
)
}
export default forwardRef(Child)
我這個(gè)業(yè)務(wù)是編輯，就是子組件編輯之后父組件的數(shù)據(jù)要變化，父組件編輯子組件也要變化，我開始認(rèn)為就是點(diǎn)擊編輯框上的確定之后調(diào)用對方方法，但是發(fā)現(xiàn)并沒有起效果，一直認(rèn)為還是自己通信問題，后來換了一下調(diào)用的地方，就起效果了，要放在調(diào)用編輯接口那個(gè)地方，因?yàn)楫惒絾栴}。目前就用的props和ref來實(shí)現(xiàn)父子之間的通信的，還有其他通信方式，等用到了再更新吧。
useImperativeHandle可以看這個(gè)Hook具體含義。
到此這篇關(guān)于React父子組件互相通信的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)React父子組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了react定位組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了React hooks的優(yōu)缺點(diǎn)詳解，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
React新擴(kuò)展函數(shù)setState與lazyLoad及hook介紹
這篇文章主要介紹了React新擴(kuò)展函數(shù)setState與lazyLoad及hook，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
React實(shí)現(xiàn)歌詞滾動效果(跟隨音樂播放時(shí)間滾動)
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)歌詞滾動效果(跟隨音樂播放使勁按滾動),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2024-02-02
詳解React中的useMemo和useCallback的區(qū)別
React中的useMemo和useCallback是兩個(gè)重要的Hooks。常常被用于優(yōu)化組件的性能。雖然這兩個(gè)Hooks看起來很相似，但它們彼此之間還是有很大的區(qū)別的，隨著小編一起來學(xué)習(xí)吧2023-04-04
這篇文章主要給大家分享React中的useEffect四種用法，useEffect中 觸發(fā)更新，重復(fù)的 useEffect，依賴值觸發(fā)回調(diào)，useEffect 的返回值，通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
react-router-dom v6版本實(shí)現(xiàn)Tabs路由緩存切換功能
今天有人問我怎么實(shí)現(xiàn)React-Router-dom類似標(biāo)簽頁緩存,很久以前用的是react-router v5那個(gè)比較容易實(shí)現(xiàn),v6變化挺大,但了解react的機(jī)制和react-router的機(jī)制就容易了,本文介紹react-router-dom v6版本實(shí)現(xiàn)Tabs路由緩存切換,感興趣的朋友一起看看吧2023-10-10
本文詳細(xì)介紹了React中的雙緩存Fiber樹機(jī)制,包括概念、核心流程、優(yōu)勢以及面試中的常見問題和標(biāo)準(zhǔn)回答,通過"通俗+專業(yè)"的方式,幫助面試者全面理解React的性能優(yōu)化體系,掌握雙緩存Fiber樹的關(guān)鍵點(diǎn),感興趣的朋友跟隨小編一起看看吧2026-03-03
React?Native實(shí)際項(xiàng)目中的經(jīng)驗(yàn)和踩坑記錄
在當(dāng)今移動應(yīng)用開發(fā)的浪潮中,React Native以其跨平臺、高效開發(fā)的特點(diǎn)脫穎而出,成為眾多開發(fā)者首選的框架之一,這篇文章主要介紹了React Native實(shí)際項(xiàng)目中的經(jīng)驗(yàn)和踩坑記錄的相關(guān)資料,需要的朋友可以參考下2026-03-03
React?實(shí)現(xiàn)具備吸頂和吸底功能組件實(shí)例
這篇文章主要為大家介紹了React?實(shí)現(xiàn)具備吸頂和吸底功能組件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02