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

父组件：

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;