Flow中React.Ref类型已缺失，如何正确标注DOM Refs？导入Ref报错怎么办？

你遇到的Ref无法导入的问题，是因为Flow的React类型定义已调整，不再直接导出顶层的Ref类型。以下是正确的标注方式：

1. 标注useRef创建的DOM Ref #

使用RefObject<T>来标注通过useRef创建的DOM引用，这个类型可以直接从react导入：

import type { Node, RefObject } from 'react';
import { useRef } from 'react';

function Container(): Node {
  // 明确标注为HTMLInputElement的RefObject
  const inputRef: RefObject<HTMLInputElement> = useRef(null);
  return <AutoselectingInput ref={inputRef} />;
}

2. 自定义组件接收Ref的正确方式 #

不要把ref作为普通props传递，React官方推荐用forwardRef来传递组件间的ref，此时可以通过React.Ref<T>类型标注（无需单独导入，直接通过React命名空间访问）：

import type { Node } from 'react';
import { useEffect, forwardRef } from 'react';

// forwardRef的泛型参数：第一个是Ref的目标类型，第二个是组件props类型
const AutoselectingInput = forwardRef<HTMLInputElement, {}>(
  (props, ref) => {
    useEffect(() => {
      // 加空值判断避免Flow的空类型报错
      if (ref.current) {
        ref.current.select();
      }
    }, [ref]);

    return <input ref={ref} defaultValue="Hello" />;
  }
);

关键说明 #

• 不再支持直接导入Ref类型，需通过React.Ref<T>（命名空间访问）或RefObject<T>来标注。
• 传递ref到子组件时，forwardRef是标准且符合Flow类型检查的做法，避免把ref当作普通props处理。

内容的提问来源于stack exchange，提问作者Glenn Mohammad