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