我正在尝试使用Flow来使用Recompose及其HOC类型键入高阶组件(HOC)。
这是我的代码:
// @flow
import React from 'react';
import { compose, defaultProps, withProps, type HOC } from 'recompose';
type InnerProps = {
text: string,
num: number,
};
type EnhancedComponentProps = {
text: string,
};
const baseComponent = ({ text, num }: InnerProps) => (
<div>
{text}
{num}
</div>
);
const enhance: HOC<*, EnhancedComponentProps> = compose(
defaultProps({
text: 'world',
}),
withProps(({ text }) => ({
text: `Hello ${text}`,
}))
);
export default enhance(baseComponent);
现在这失败了:
Cannot call enhance with baseComponent bound to a because property num is missing in object type [1] but exists in
InnerProps [2] in the first argument.
src/Text.js
[2] 14│ const baseComponent = ({ text, num }: InnerProps) => (
:
27│ }))
28│ );
29│
30│ export default enhance(baseComponent);
31│
flow-typed/npm/recompose_v0.x.x.js
[1] 95│ ): HOC<{ ...$Exact<Enhanced>, ...BaseAdd }, Enhanced>;
尝试阅读文档和一些我无法达成解决方案的博客文章。我发现的所有例子都非常简单,但没有一个涵盖这个简单的案例。
输入此代码的正确方法是什么?
答案 0 :(得分:3)
我猜你得到了正确的错误。它说:
num在对象类型[1]中缺失,但存在于InnerProps [2]中 第一个论点。
您声明您的HOC会在EnhancedComponentProps
中找到错过num
的内容。换句话说,您尝试从Object中提取num
,只会获得EnhancedComponentProps
类型中声明的内容。
基于recompose docs:,你应该通过以下方式完成这项工作:
// @flow
import React from 'react';
import { compose, defaultProps, withProps, type HOC } from 'recompose';
type EnhancedComponentProps = {
text: string,
num: number,
};
const baseComponent = ({ text, num }: EnhancedComponentProps) => ( // in the example from recompose this typing is unnecessary though
<div>
{text}
{num}
</div>
);
const enhance: HOC<*, EnhancedComponentProps> = compose(
defaultProps({
text: 'world',
}),
withProps(({ text }) => ({
text: `Hello ${text}`,
}))
);
export default enhance(baseComponent);