将React Memo与Flow一起使用的正确方法是什么？

Question

这行代码

export default memo(LoadingOverlay);

给出流量错误

Missing type annotation for `P`. `P` is a type parameter declared in  function type [1] and was implicitly instantiated at  call of `memo` [2].Flow(InferError)

这行

export default memo<TProps>(LoadingOverlay);

给出编译时错误。 React memo与flow的正确用法是什么？

编辑：

这是完整的文件示例

// @flow

// React modules
import React, { memo } from 'react';

// Material UI components
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';

// Utils and defaults
import './checkbox.scss';

type TProps = {
  value: string;
  label: string;
  checked: boolean;
  disabled?: boolean;
  onChange: Function;
};

/*
 * Presentational component with following props:
 *  value: String, value as a name of checkbox
 *  label: String, checkbox label
 *  checked: Boolean, checkbox state
 *  disabled: Boolean, checkbox availability state
 */
const Checkbox = (props: TProps) => {
  console.log('RENDER CHECKBOX');
  const {
    value,
    label,
    checked,
    disabled
  } = props;
  const { onChange } = props;

  return (
    <FormControlLabel
      control={
        <Checkbox
          checked={checked}
          onChange={onChange(value)}
          value={value}
          disabled={disabled}
          color="primary"
        />
      }
      label={label}
    />
  );
};

Checkbox.defaultProps = {
  disabled: false,
};

export default memo<TProps>(Checkbox);

Answer 1

我有同样的问题。 问题不在于Flow，而是Babel。

带有Flow的React.memo

您做对了。正确的方法确实是：

export default memo<Props>(MyComponent);

编译问题

有两种解决方法。

1。简单：在顶部添加流注释

将// @flow添加到文件顶部。错误来自Babel，并且需要在其中添加注释。即使您可能在all=true中有.flowconfig（并且Flow可以正常工作），您仍需要这样做。

在使用create-react-app且不想使用eject时有用。

2。配置Babel

为Flow添加Babel预设，并为"all": true指定.babelrc选项：

{   
  "presets": [
    ["@babel/preset-flow", {
      "all": true
    }]
  ]
}

但是，这需要任何使用create-react-app到eject的人。（或者可能使用react-app-rewired，但我对此没有经验。）

here中提到了此解决方案（感谢mentioning使用@ fl0shizzle），有关create-react-app解决方案的讨论请参见here。

Answer 2

确保您具有最新版的flow。当我更新流程版本时，它就可以工作了。我在顶部缺少// // @flow，因此不得不将all = true添加到我的预设配置中。