javascript - 如何解决 Flow 中的 "inexact function"错误？

Question

好吧，我有一个非常简单的可行方案，但我的问题是保持流程愉快。

const StatusImage: React$Element<*> =
            props.statusImage ? (props.statusImage) : ((): React$Element<*> => <div/>);

如果组件的用户通过 statusImage 属性提供一个 StatusImage ，我想在我的 React 组件中显示一个 StatusImage 。否则我只想将图标留空。

它有效，但我收到以下无法解决的流程错误。我正在使用 flow-bin 版本 0.113.0

Cannot assign props.statusImage ? props.statusImage : (...) => <div /> to StatusImage because inexact function [1] is
incompatible with exact React.Element [2].

 [2] 121|         const StatusImage: React$Element<*> =
 [1] 122|             props.statusImage ? (props.statusImage) : ((): React$Element<*> => <div/>);

我在谷歌上搜索了不精确函数流程错误，但找不到任何可以解决我的问题的内容。这似乎是一个相当新的错误，最近才开始在流程中检查。

Answer 1

我建议使用 React.ComponentType<Props> 输入 if props.statusImage可以包含无状态功能组件或类组件。如果props.statusImage只能是无状态功能组件，那么您可以使用 React.StatelessFunctionalComponent<Props> .

import * as React from "react";

type StatusImageComponent = React.ComponentType<{}>;

type Props = { statusImage?: StatusImageComponent };

function Foo(props: Props) {
  const StatusImage =
    props.statusImage === undefined ? () => <div /> : props.statusImage;
  return (
    <div>
      <StatusImage />
    </div>
  );
}

Try Flow