[react+ts] useRef获取自定义组件dom或方法声明

想用useRef获取自定义组件?

如果获取dom,直接写

  const sonRef = useRef<HTMLDivElement>(null);

然后子组件用forwardRef包一层,注意是HTMLDivElement,别写错, 写HTMLElement不行

const Son = forwardRef<HTMLDivElement, IProps>((props, ref) => {})

切记这时Son不能写Son:React.FC了,不然报错

这时候可以打印dom了

---

---

---

那怎么拿子组件的方法呢? 先把 forwardRef第一个参数改为ref的类型

定义暴露的函数

  const handleClick = () => {setNum(8999);};useImperativeHandle(ref, () => {return {handleClick,};});

父组件也要改一下

这时候点一下就出来了

我直接打印sonRef.current试试

ok