React Typescript 功能组件语法错误答案

【问题标题】：React Typescript Functional Component Syntax ErrorReact Typescript 功能组件语法错误
【发布时间】：2021-05-25 16:28:06
【问题描述】：

我想创建一个通用功能组件，但我得到了这个：

代码块；

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 <></>;
}

【问题讨论】：

AppTable 不返回 React.FC ，它是 React.FC 应该是这样的： AppTable: React.FC>
@ShreyGupta 那么我如何创建通用功能组件？
that 是什么意思？考虑到 AppTable 不知道 data 类型，因此您无法访问其属性。

标签： reactjs typescript typescript-generics react-functional-component

【解决方案1】：

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

React.FC 类型不支持泛型组件。这不是问题，因为任何与FC 的签名匹配的东西都可以用作FC。该签名是它接受一个道具对象并返回一个JSX.Element。 FC 自动包含 children 属性，但我们可以使用 helper React.PropsWithChildren 自己添加。

我们需要使函数本身成为泛型，因此我们将类型应用于 props 和 return 而不是函数本身（这是 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 <></>;
}

【讨论】：