reactjs - React TypeScript 函数组件语法错误

我想创建一个通用的功能组件，但我遇到了这个问题

:

代码块 ;

interface IAppTable<Type> {
  height: number;
  data: Type[];
  tableLayout: 'auto' | 'fixed';
  pagination?: false;
}

const AppTable: <T>(props: IAppTable<T>) => React.FC<IAppTable<T>> = (props) => {
  const [selectedRows, setSelectedRows] = useState<number[]>([]);
  const getColumns = () => {
    setSelectedRows([1]);
    return [];
  };
  return <></>;
}

答案＃1

正如 @Shrey 所解释的，AppTable 并不是 返回 一个函数组件，它 就是 一个函数组件。

React.FC 类型不支持泛型组件。这不是问题，因为任何符合 FC 签名的内容都可以作为 FC 使用。该签名是它接收一个 props 对象并返回一个 JSX.Element。FC 会自动包含 children 属性，但我们可以使用辅助工具 React.PropsWithChildren 自行添加它。

我们需要让函数本身是泛型的，因此我们将类型应用于 props 和返回值，而不是应用于函数本身（React.FC 所做的就是这样，这也是为什么它不能与泛型一起使用的原因）。

import React, { useState, PropsWithChildren } from "react";

const AppTable = <T extends any>(props: PropsWithChildren<IAppTable<T>>): JSX.Element => {
  const [selectedRows, setSelectedRows] = useState<number[]>([]);
  const getColumns = () => {
    setSelectedRows([1]);
    return [];
  };
  return <></>;
}