Question

当我尝试使用（可以说）好的道具创建一个React元素时，

Flow 0.53.1会发出错误：

//@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。）

Flow在泛型函数

1 个答案: