Flow.js无法识别React中ComponentProps的问题如何解决？

你遇到的这个报错是因为Flow的类型体系和React官方的类型导出存在差异——早期版本的Flow并没有提供和React一致的ComponentProps导出，所以才会提示找不到这个模块。下面给你几个实用的解决办法：

方法一：用Flow内置的$Props类型替代 #

Flow本身有专门用来获取DOM元素props的内置工具类型$Props，功能和你想要的ComponentProps完全一致，这也是Flow生态里的标准用法。修改后的代码如下：

// @flow
import React, { type Element } from 'react';

interface ButtonProps extends $Props<'button'> {
  name: string;
}

const Button = (props: ButtonProps): Element<'button'> => {
  const { children } = props;
  return <button {...props}>{children}</button>;
};

export default function ButtonTest() {
  return (
    <div>
      <Button name="sahil" style={{ margin: 20 }}>
        Sahil Kapoor
      </Button>
    </div>
  );
}

方法二：升级Flow版本以支持ComponentProps #

如果你坚持想用React官方命名的ComponentProps，可以尝试升级你的Flow到较新的稳定版本（比如v0.180.0及以上）。后期的Flow已经对齐了React的类型导出，升级后就能直接导入ComponentProps使用，不需要修改原有代码结构。

升级后记得确认项目里的React类型定义是最新的，避免出现其他类型兼容问题。

方法三：自定义兼容类型保持代码一致性 #

如果暂时无法升级Flow，也可以自己定义一个兼容的ComponentProps类型，这样既能保持代码和React官方写法一致，又能适配旧版Flow：

// @flow
import React, { type Element } from 'react';

// 自定义兼容Flow的ComponentProps类型
type ComponentProps<T> = $Props<T>;

interface ButtonProps extends ComponentProps<'button'> {
  name: string;
}

const Button = (props: ButtonProps): Element<'button'> => {
  const { children } = props;
  return <button {...props}>{children}</button>;
};

export default function ButtonTest() {
  return (
    <div>
      <Button name="sahil" style={{ margin: 20 }}>
        Sahil Kapoor
      </Button>
    </div>
  );
}

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