react 自定义组件ref引用代码片段

677 阅读1分钟

引用类型: const refs = useRef(null);

调用定义类型: refs.current.reset();

tsx:<自定义组件 ref={refs} />

引用组件定义

vue3中setup参数中ctx包含expose 和 useImperativeHandle 功能相同,向外抛出。

import { ForwardRefRenderFunction, useImperativeHandle } from "react";

export type dataCountViewRef = {
  reset(): void;
};
export type dataCountViewProps = { data:Array<string> };
const Index: ForwardRefRenderFunction<dataCountViewRef, dataCountViewProps> = (
  props,
  ref
) => {

  useImperativeHandle(ref, () => {
    return {
      reset() {},
    };
  });
  return <article></article>;
};

export default Index;