What is the proper way to use React Memo with Flow?

Question

This line of code

export default memo(LoadingOverlay);

Gives flow error

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)

And this line

export default memo<TProps>(LoadingOverlay);

Gives compile time error. What's the proper use of React memo with flow?

EDIT:

Here is the full file example

// @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-appto的任何人eject。（或者可能使用react-app-rewired，但是我对此没有经验。）

此解决方案在此处提到（感谢@ fl0shizzle 提及），有关create-react-app解决方案的讨论请参见此处。