69343


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

エラーメッセージ

[code]

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

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

ソース

[code]

    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>
      );
    };
    
[/code]


CC BY-SA 4.0
2020-08-07T03:58:32.070
69320
2020-08-07T13:44:09.330
31097
question
reactjs typescript
React (TypeScript) のHookでFunctionComponentをCurry化しようとするとエラーになります


こうですね

[code]

    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>
      );
    };
    
[/code]


CC BY-SA 4.0
2020-08-07T13:44:09.330
69343
2020-08-07T13:44:09.330
7997
69320
answer