Reactjs 流在泛型函数中创建React元素时抛出错误

Flow 0.53.1在我尝试创建一个具有良好道具的React元素时发出错误：

//@flow
import * as React from 'react';

type IsValidType = {
  isValid: boolean
}

function Comp(props: IsValidType) {
  return <p>{props.isValid ? 'valid' : 'invalid'}</p>;
}

function test<T:IsValidType>(C: React.ComponentType<T>) {
  return <C isValid={true}/>;
}

test(Comp);

我得到以下错误：

 11:   return <C isValid={true} />;
              ^^^^^^^^^^^^^^^^^^^^ React element `C`
 11:   return <C isValid={true} />;
              ^^^^^^^^^^^^^^^^^^^^ props of React element `C`. This type is incompatible with
     v--------------------------------------------------------------
 10: function test <T:{isValid: boolean}>(C:React.ComponentType<T>){
 11:   return <C isValid={true} />;
 12: }
     ^ some incompatible instantiation of `T`

---

我做错了什么？

我认为这不是一个bug，尽管它有点让人困惑

首先，请注意，如果将代码更改为：

function test(C: React.ComponentType<IsValidType>) {

最初的声明是：

function test<T:IsValidType>(C: React.ComponentType<T>) {

原始版本中说：测试采用的组件采用的道具与IsValidType完全相同或是IsValidType的子类型。结果证明这个函数实际上不能做到这一点

在flow中，类似{isValid:bool，b:string}的类型被认为是{isValid:bool}的子类型。但是这个函数显然不能接受这样一个带有额外道具的组件，因为它只知道如何填写isValid。所以，您想说的是：test接受一个组件，该组件恰好期望prop isValid:bool。您也可以交替地说，一个最多需要道具的组件是有效的：bool，但这会变得有点棘手

这些子类型规则有点棘手。我有一篇博客文章可能会在下周发表，试图更好地解释它

---

找到这一点的读者可能希望阅读GitHub的一期。

讨论在GitHub上进行。最后的答案可以在这里找到：