Closed4

GenericsをつけたReact.FCを作成する

mu-sukemu-suke

ゴール

  • React.FCにジェネリクスを受け取れるようにする

課題点

  • 高階関数でクリアできそうだけどやり方がいまいちわかっていない

環境

ツール・ライブラリ 用途 バージョン
React フロントエンドのJSライブラリ 18.2.0
node.js フロント、サーバーサイドの実行環境 v16.14.0

参考資料

https://stackoverflow.com/questions/68757395/how-to-make-a-functional-react-component-with-generic-type

https://zenn.dev/gomo/articles/1704280e6d069c

mu-sukemu-suke

これを参考に書き換えたが、呼び出せなかった

const WithGeneric = <T,>(): React.FC<TestProps<T>> =>
  (props: TestProps<T>) => (
    <span>Some component logic</span>
  );
const Test = WithGeneric<Obj>()
TS2786: 'GenericsComponent' cannot be used as a JSX component.   Its return type 'FC<Props<string>>' is not a valid JSX element.     Type 'FunctionComponent<Props<string>>' is missing the following properties from type 'ReactElement<any, any>': type, props, key

https://stackoverflow.com/questions/68757395/how-to-make-a-functional-react-component-with-generic-type

このスクラップは2022/07/20にクローズされました