react调用无状态组件中的方法

ref只能够获取class组件和dom，如果想调用无状态组件(Function)中的方法怎么办呢，react为我们提供了一个useImperativeHandle方法来暴露需要的方法

import React, { useRef, useState } from 'react';
import { useImperativeHandle } from 'react';

function Child(props, ref) {
  const input = useRef();
  // 使用useImperativeHandle方法暴露出父级组件能访问得对象
  // 第一个参数为ref， 第二为函数，返回外包能够调用得方法
  useImperativeHandle(ref, () => ({
    getValue: () => {
      return input.current.value;
    },
  }));

  return <input ref={input} />;
}

const Children = React.forwardRef(Child);

export default function Father() {
  const ref = useRef();
  const [value, setValue] = useState('');

  const handleClick = () => {
    setValue(ref.current.getValue());
  };

  return (
    <div>
      <div onClick={handleClick}>点击调用子组件方法{value}</div>
      <Children ref={ref} />
    </div>
  );
}

注意: 使用useImperativeHandle函数时一定要结合React.forwardRef使用