react绑定ref调用

最新推荐文章于 2025-05-17 14:52:41 发布

小只笨笨狗～

最新推荐文章于 2025-05-17 14:52:41 发布

阅读量340

点赞数 1

文章标签： react.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_51196135/article/details/145775463

版权

场景需求：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 }) {

xxx


  const handleOk = async () => {
    try {
      await xxxApi({
        params: {
         xxx:xxx
        },
      })

      transRecordTableRef?.refresh()

    }
    finally {
       xxx
    }
  }


}