javascript - 如何满足Flow中的“inexact函数”错误？

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

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

如果组件的用户通过StatusImage属性提供一个statusImage，我想在我的React组件中显示一个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/>);

我已经用Google搜索了不精确的函数流错误，但是找不到任何可以解决我问题的地方。这似乎是一个相当新的错误，最近才开始对其进行检查。

最佳答案

如果React.ComponentType<Props>可以包含无状态功能组件或类组件，我建议使用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