好吧,我有一个非常简单的可行方案,但我的问题是保持流程愉快。
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/>);
我在谷歌上搜索了不精确函数流程错误,但找不到任何可以解决我的问题的内容。这似乎是一个相当新的错误,最近才开始在流程中检查。
最佳答案
我建议使用 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>
);
}
关于javascript - 如何解决 Flow 中的 "inexact function"错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59575818/