react hook 父组件调用子组件方法

父组件

import Son from './son';
import { useRef } from 'react';
export default () => {
  const childRef = useRef();
  const updateChildState = () => {
    // changeVal就是子组件暴露给父组件的方法
    childRef.current.changeVal(99);
  };
  return (
    <div>
      fuqin
      <Son ref={childRef} />
      <button onClick={updateChildState}>触发子组件方法</button>
    </div>
  );
};

子组件

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

export default forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    // changeVal 就是暴露给父组件的方法
    changeVal: (newVal) => {
      console.log(123, newVal);
    },
  }));
  return <div>son</div>;
});