0

ボタンの種類を渡す関数と、通常のHookのFunctionComponentの関数をカリー化しようとしたのですが、VSCodeのLintから以下のエラーメッセージが表示されます。

エラーメッセージ

(type: string) => (props: Props) => JSX.Element' を型 'FC<Props>' に割り当てることはできません。
  パラメーター 'type' および 'props' は型に互換性がありません。
    型 'PropsWithChildren<Props>' を型 'string' に割り当てることはできません。ts(2322)
index.tsx(15, 28): この式を呼び出すことを意図していましたか?

戻り値の型がFunctionComponentの定義に一致していないのは分かるのですが、どう直せば良いのか分からず困っています。

ソース

type Props = {
  type?: string;
  onClick?: () => void;
  children: ReactNode;
};

const ButtonA: FC<Props> = (type: string) => (props: Props) => {
  return (
    <Button variant="contained" color={type} onClick={props.onClick}>
      {props.children}
    </Button>
  );
};

1 件の回答 1

0

こうですね

type Props = {
  type?: string;
  onClick?: () => void;
  children: ReactNode;
};

const ButtonA = (type: string): FC<Props> => (props: Props) => {
  return (
    <Button variant="contained" color={type} onClick={props.onClick}>
      {props.children}
    </Button>
  );
};
1
  • ありがとうございます。 書いてみると、なるほど納得しました。 この記述で問題なく実行でき、解決しました。
    – mill
    Commented 2020年8月9日 7:27

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。