长沙百度提升排名_东莞营销网站建设哪个平台好_个人网页在线制作_seo网站推广软件排名

场景需求：A B 两组件，当 A组件（如添加、删除、更新数据）后需要刷新 B组件 表格数据时，或需要在特定时机强制更新表格数据时，这是一种很常见的 React 组件间通信模式，通过 ref 暴露必要的方法给父组件使用。

1、单页面

import  { useRef } from 'react'

const tableRef = useRef<HTMLTableSectionElement>(null)

<div  ref={tableRef}> xxx </div>

2、多页面

1.子组件暴露ref

 
export type TranslationTableRef = { refresh: () => void }useImperativeHandle(ref, () => ({refresh: mutate,}))const { data: translationRecord, mutate } = useSWR({action: 'FetchTranslationUsageData',params: query,},params => translationsListApi(params.params),{ refreshInterval: 3000 },)

2.父组件接收

//父组件import type { TranslationTableRef } from './xxx'const tableRef = useRef<TranslationTableRef>(null)<DocumentUploader transRecordTableRef={tableRef.current}/>     //需要调用的子组件<TransRecordTable ref={tableRef} />                            //被调用的子组件

3.调用

export default function DocumentUploader({ transRecordTableRef }: { transRecordTableRef: TranslationTableRef | null }) {xxxconst handleOk = async () => {try {await xxxApi({params: {xxx:xxx},})transRecordTableRef?.refresh()}finally {xxx}}}