react hook:useRef,forwardRef, useImperativeHandle父子通信

露易丝·瓦利埃尔

已于 2024-05-17 09:19:08 修改

阅读量476

点赞数 9

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react.js javascript 前端

于 2024-03-15 10:55:20 首次发布

本文链接：https://blog.csdn.net/qq_53479087/article/details/136733604

react 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在React应用中，父组件通过`useRef`和`useImperativeHandle`配合`forwardRef`，实现调用子组件的方法。父组件通过`onClick`事件触发子组件的`reLoadPage`方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用场景:父组件调用子组件里的方法

父组件：Father.tsx

import React, { useRef } from 'react';
import Children from './children';
import { Button, FormInstance } from 'antd';
interface CustomFormInstance extends FormInstance {
  reLoadPage: () => void;
}
const Father = () => {
  const childrenRef = useRef<CustomFormInstance>(null); //第三步表单的dom
  return (
    <>
      <Children ref={childrenRef} />
      <Button
        onClick={() => {
          childrenRef?.current?.reLoadPage();
        }}
      >
        点击获取子组件方法
      </Button>
    </>
  );
};
export default Father;

子组件:Children.tsx

import React, { forwardRef, useImperativeHandle } from 'react';

const Children = forwardRef((_props, ref) => {
  useImperativeHandle(ref, () => ({
    reLoadPage: () => {
      console.log('子组件里的方法');
    },
  }));
  return <div>test</div>;
});
export default Children;

点击Father.tsx里的按钮就可以调用子组件里的方法了