Question

我试图指定一个函数应该只返回一个特定类型的React $ Element。查看源代码，以下内容应该有效，但不是：

/* @flow */

import React, { Component } from 'react';

type Props = {
  testID: string
}

class Price extends Component {
    props: Props;

    render() {
        return null
    }
}

function bla() : React$Element<Price> {
  return <Price testID="fds"/>;
}

我收到以下错误：

18:   return <Price testID="fds"/>;
             ^ props of React element `Price`. This type is incompatible with
17: function bla() : React$Element<Price> {
                                   ^ Price
18:   return <Price testID="fds"/>;
             ^ property `testID`. Property not found in
17: function bla() : React$Element<Price> {
                                   ^ Price

以下是发生错误的操场链接：

https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVBLAtgBzgJwBcwAlAUwEMBjQgGjAG8wBhOXOAOzI+IF8wo+NmADk+SjREBudIQCeOMmAAKQnAGcwAXkaowYQmXWEAkgBEAXGGP4MHAOape6KjArrNqjFSVkAHoYcACaarOxcPLr6+jhq6laqcBoyqACQ4sFk+AAUAJRR0elkhACu+BxgHCUwMHrRzs6oUCUcNBicYABGbnlgVuTUhAAkAKIwZFjchAA8Xj4AfAXipeVgs7Y+BkamZloARFAhe8DzMrxAA

（您可能必须将流版本从v0.43.1切换到v0.43）

编辑：正如Nate在下面提到的，我可以将Props作为类型参数传递，但是如果函数返回另一个具有相同Props类型的React元素，则flow不会抱怨。

Answer 1

Flow 0.53.0包括对React的重大改进。其中的一项更改是React.Element<typeof Component> type。

要使用此新类型，您将不得不使用import * as React from 'react'导入React，这将导入React类型以及React库，因此您可以使用React.Element。或者，您可以显式导入所需的类型，例如import React, { Component, type Element as ReactElement } from 'react'，然后使用ReactElement。

使用示例代码，它看起来像这样：

/* @flow */
import React, { Component, type Element as ReactElement } from 'react';

type Props = {
    testID: string
}

class Price extends Component<Props> {
    render() {
        return null
    }
}

function bla() : ReactElement<typeof Price> {
    return <Price testID="fds"/>;
}

或者，here it is in Flow's playground。

Answer 2

1）有一堆404是你使用默认版本0.43.1。您需要与flow联系以解决问题

2）切换到prev版本会发现以下问题：

如何指定唯一的React $ Element作为流类型

2 个答案: