脱围机制-react18废除forwardRef-＞react19直接使用ref的理解

I like Code?2025-03-28 18:07

采用ref，可以在父组件调用到子组件的功能

第一步：在父组件声明ref并传递ref

复制代码

interface SideOptsHandle {
  refreshData: () => Promise<void>
}
  const sideOptsRef = useRef<SideOptsHandle>(null) // 创建 ref
            <SideOpts ref={sideOptsRef} />

第二步：在子组件接收ref，并通过useImperativeHandle进行脱围

复制代码

interface SideOptsHandle {
  refreshData: () => Promise<void>
}

interface SideOptsProps {
  ref?: React.Ref<SideOptsHandle>
  // 其他 props 可在这里定义
}
const SideOpts = ({ ref }: SideOptsProps) => {

  useImperativeHandle(ref, () => ({
    refreshData: async () => {
      await fetchData()
    },

第三步：父组件使用ref进行使用子组件脱围的对象

复制代码

    if (sideOptsRef.current) {
      await sideOptsRef.current.refreshData() // 调用 SideOpts 的刷新方法
      console.log('刷新成功')
    }