如何用Flow指定返回类型为React组件列表？

我来帮你拆解这个问题并解决它～

首先，你遇到的错误根源很明确：你把组件的实例类型NavbarItem传给了React$Element，但React$Element的类型参数其实需要的是组件的构造函数类型（也就是类本身的类型）。

为什么会报“statics不兼容”的错？ #

Flow对React$Element<ElementType>的ElementType有严格约束，它要求这个类型必须是符合React$ElementType的组件类型——这意味着它得包含组件的静态属性（比如defaultProps、propTypes，或者Flow内部用来识别组件的静态标识）。而NavbarItem是组件实例的类型，实例本身没有这些静态属性，所以Flow才会提示你“组件的statics和指定的类型参数不兼容”。

修复方法很简单 #

只需要把返回类型里的NavbarItem改成typeof NavbarItem（也就是组件类本身的类型）就行：

getNavbarItems(): React$Element<typeof NavbarItem>[] {
  return this.navbarItems.map((navbarItem, index) => {
    return (
      <NavbarItem key={index} title={navbarItem.title} icon={navbarItem.icon} listPath={navbarItem.listPath} createPath={navbarItem.createPath} />
    );
  });
}

额外小提示 #

如果你用的是较新版本的Flow，更推荐用标准的React.Element替代旧的React$Element写法，效果是一样的：

getNavbarItems(): React.Element<typeof NavbarItem>[] {
  // 你的代码逻辑不变
}

另外，如果你不想直接关联组件类，也可以通过组件的Props类型来定义元素类型（假设你的Props类型是INavbarItemProps）：

getNavbarItems(): React$Element<INavbarItemProps>[] {
  // 代码逻辑不变
}

这种写法更聚焦组件接收的props，也是Flow里很常用的方式。

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