使用自身属性增强组件的 HOC 类型？

Question

我正在尝试使用 Recompose 及其 HOC 类型，使用 Flow 来键入高阶组件 (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>;

尝试阅读文档和一些博客文章时我无法找到解决方案。我找到的所有示例都非常简单，其中 none 个涵盖了这个简单的案例。

输入此代码的正确方法是什么？

Answer 1

我猜你猜对了。它说：

num is missing in object type [1] but exists in InnerProps [2] in the first argument.

您声明您的 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);

使用自身属性增强组件的 HOC 类型？

Type HOC that enhances component with its own properties?

javascript

reactjs

flowtype

recompose