【react学习】React + Hooks + TypeScript：父组件调用子组件的方法

luckyMuses

于 2023-06-16 18:04:34 发布

阅读量715

点赞数

文章标签： react.js 学习 typescript

本文链接：https://blog.youkuaiyun.com/qq_39844855/article/details/131251787

版权

该文章展示了在React17和18中如何使用`useRef`和`createRef`创建引用，以及通过`forwardRef`和`useImperativeHandle`将子组件的方法暴露给父组件，以便在父组件中调用子组件的方法获取数据。

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

父组件：

import React, { createRef, useRef } from "react";
import Child from "./child";

const Parent = function () {
	// react17的写法
  const childRef = useRef<any>(null);
	// react18的写法
  const childRef = createRef<any>();

  return (
    <div>
      <button
        onClick={() => {
          childRef.current.getData()
        }}
      >
        获取子组件数据
      </button>
      <Child ref={childRef}></Child>
    </div>
  )
}

export default Parent;

子组件：

import React, { forwardRef, useImperativeHandle, useState } from "react";

// 第一步：需要使用forwardRef来转发实例
const Child = forwardRef((props, ref) => {
  const [childData] = useState<string>('test Data');

  const getData = () => {
    console.log(childData)
  }

  // 第二步：需要使用useImperativeHandle来将子组件的方法抛给父组件
  useImperativeHandle(ref, () => ({
    getData
  }))

  return (
    <div>
      this is child component
    </div>
  )
})

export default Child;