Better

最近在 TypeScript 中使用 forwardRef 时，类型总是报错，往往最终得搬出 any 大法，但是内心总是有点不爽，这里记录在函数式组件和类组件中，该如何正确使用 forwardRef。

函数式组件

在函数式组件中，forwardRef 需要搭配 useImperativeHandle hooks 使用。其实类型出错的原因就在于需要使用 React.Ref 将类型声明一下，例子如下

import React, { forwardRef, useImperativeHandle, useRef, Ref } from "react";

type CustomInputProps = {
  label: string;
};

type RefDataType = HTMLInputElement | null;

function CustomInput(props: CustomInputProps, ref: Ref<RefDataType>) {
  const inputRef = useRef<HTMLInputElement | null>(null);

  // 自定义你需要暴露给父组件的对象，这里直接将 input 暴露出去了
  useImperativeHandle(ref, () => inputRef.current);

  return (
    <div>
      <span>{props.label}:</span>
      <input ref={inputRef} />
    </div>
  );
}

export default forwardRef<RefDataType, CustomInputProps>(CustomInput);

上面使用 useImperativeHandle 可以自定义需要暴露的元素，上述例子也可以简写为。？？？update at 20200613 这个例子好像有问题！！！咋么肥事

type RefDataType = HTMLInputElement;

type CustomInputProps = {
  label: string;
};

function CustomInput(props: CustomInputProps, ref: Ref<RefDataType>) {
  return (
    <div>
      <span>{props.label}:</span>
      <input ref={ref} />
    </div>
  );
}

类组件

直接上例子

type RefDataType = HTMLInputElement;

type CustomInputProps = {
  label: string;
  forwardRef: Ref<RefDataType>;
};

class CustomInput extends Component<CustomInputProps> {
  render() {
    return (
      <div>
        <span>{this.props.label}:</span>
        <input ref={this.props.forwardRef} />
      </div>
    );
  }
}

export default forwardRef<RefDataType, CustomInputProps>((props, ref) => (
  <CustomInput {...props} forwardRef={ref} />
));