web-dev-qa-db-ja.com

React Memo with Flowを使用する適切な方法は何ですか？

このコード行

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);

コンパイル時エラーが発生します。 flowでのReact memoの適切な使用法は何ですか？

編集：

これが完全なファイルの例です

// @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);
reactjsflowtype
9
Hayk Safaryan

私も同じ問題を抱えています。 問題はフローではなく、バベルにあります。

フロー付きのReact.memo

正解です。正しいアプローチは本当に：

export default memo<Props>(MyComponent);

コンパイルの問題

これを解決するには2つの方法があります。

1.シンプル：フローアノテーションを上部に追加する

ファイルの先頭に// @flowを追加します。エラーはBabelから発生し、そこに注釈が必要です。 all=trueに.flowconfigが含まれている場合でも（フローは完全に機能します）、これを行う必要があります。

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 （@ fl0shizzleに感謝 メンション it）とcreate-react-appソリューションについての議論は here を参照してください。

8
exmaxx

最新バージョンのフローであることを確認してください。フローバージョンを更新したところ、うまくいきました。上部に// @flowがなかったため、プリセット構成にall = trueを追加する必要がありました。

1
fl0shizzle