如何满足 Flow 中的 "inexact function" 错误？

Question

好的，所以我有一个非常简单的场景，但我的问题是保持流畅。

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

如果组件的用户通过 statusImage 道具提供一个，我想在我的 React 组件中显示一个 StatusImage。否则我只想离开 space 图标将是空白的。

它有效，但我收到以下我无法解决的流程错误。我正在使用 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 不精确函数 流程错误，但找不到任何可以解决我问题的方法。这似乎是一个相当新的错误，最近才开始在流程中检查。

Answer 1

经过进一步的试验和错误，这似乎可行....

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

Answer 2

我建议使用 React.ComponentType<Props> type if props.statusImage can contain a stateless functional component or a class component. If props.statusImage can only be a stateless functional component then you could use 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

如何满足 Flow 中的 "inexact function" 错误？

How do I satisfy an "inexact function" error in Flow?

javascript

reactjs

flowtype