React_forwardref的ts类型定义

前言：好久没有写过文章，因为最近跳槽进了新公司，新公司技术栈使用react+ts，并且提交代码管理很严格，以后也会逐步记录ts类型定义中一些注意的地方。

获取dom节点的方式

在React中，想要获取dom节点，可以使用React.createRef或者useRef方法定义变量将其绑定到dom节点，例如：

const Index = () => {
  const divRef = useRef<HTMLDivElement>(null)
  return (
    <div ref={divRef}>
      test
    </div>
  );
};

像这种普通的div标签或者input标签等等，ts的类型定义还是很清晰的，但是在antd4中使用form表单时，有些小伙伴就会不知道该如何定义，可以直接从antd中引入FormInstance，例如：

import { Form, FormInstance } from "antd"
const Index = () => {
  const formRef = useRef<FormInstance>(null)
  return (
    <Form ref={divRef}>
      
    </Form>
  );
};

forwardRef的使用

默认情况下，我们不能在函数组件上使用ref属性，因为他们没有实例（当然可以在函数组件内部使用，如上）。如果要在函数组件上使用ref，我们可以使用forwardRef：

// 父组件
const Index = () => {
  const divRef = useRef<HTMLDivElement>(null)
  return (
    <Child ref={divRef} />
  );
};

子组件的两种写法：

// 第一种
import React, { forwardRef } from "react"
​
type ChildProps = {}
type ChildRef = HTMLDivElement
​
const Child = forwardRef<ChildRef, ChildProps>((props, ref) => {
  return (
    <div ref={ref}></div>
  );
}) 
​
export default Child;

// 第二种
import React, { forwardRef } from "react"
​
type ChildProps = {}
type ChildRef = HTMLDivElement
​
const Child: React.ForwardRefRenderFunction<ChildRef, ChildProps> = (props, ref) => {
  return (
    <div ref={ref}></div>
  );
};
​
export default forwardRef(Child);

这样子大家就可以在父组件中获取子组件的dom节点了。