react 函数组件暴露方法

场景

部分时候希望在子组件中暴露方法给父组件，使用 Class 组件时配合 ref 很容易拿到子组件实例，并且可以执行子组件上的方法。

但是函数组件没有组件实例，就算使用 ref 转发，也只会把 ref 转发到内部。hook 推出后，可以使用 useImperativeHandle 来控制转发的 ref。比如：

const Chart = (_, ref) => {
  // 方法暴露
  useImperativeHandle(
    ref,
    () => ({
      doSomething() {
        console.log('here is children method!');
      },
    }),
    []
  );

  return <div></div>;
};

const ForwardRefChart = forwardRef(Chart);


function App () {
  const ref = useRef();

  // 执行子组件暴露的 dosomething 方法
  useEffect(() => void ref.current?.doSomething(),[ref]);

  return <ForwardRefChart ref={ref} />
}

tsx 如下：

export interface DRefHandle {
  // 清理表格方法
  doSomething: Function;
}

const Chart: ForwardRefRenderFunction<DRefHandle, any> = (_, ref) => {
  // 方法暴露
  useImperativeHandle(
    ref,
    () => ({
      doSomething() {
        console.log('here is children method!');
      },
    }),
    []
  );

  return <div></div>;
};

const ForwardRefChart = forwardRef(Chart);


function App () {
  const ref = useRef<DRefHandle>();

  // 执行子组件暴露的 dosomething 方法
  useEffect(() => void ref.current?.doSomething(),[ref]);

  return <ForwardRefChart ref={ref} />
}