流抛出上反应元素创建一个通用的功能

Question

流量0.53.1发出一个错误，当我试图创建与（supposably）好道具阵营元素的错误：

//@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` 

我在做什么错？

Answer 1

我认为这不是一个错误，虽然它有点混乱！

首先，请注意，如果您将其更改为代码确实工作：

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

原来的宣言是：

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

那原始版本说：“test需要的是需要道具组件确切地说是或者是IsValidType的一个子类型。“事实证明，该功能实际上无法做到这一点。

在流程中，像{isValid: bool, b:string}这样的类型被认为是{isValid: bool}的子类型。但是这个功能显然不能带有这样的额外道具的组件，因为它只知道如何填写isValid。所以你想说的是：test需要一个组件，该组件需要完全支持isValid: bool。或者，您可以也说：“顶多道具isValid: bool预计一个组成部分，但就有点麻烦。

这些子类型的规则是有点棘手。我有一个博客文章，将可能成为下周尝试。解释它更好

（谁觉得这可能需要去在GitHub的问题读the continued conversation读者）