React+TypeScript：forwardRef封装AgGridReact传泛型报错解决

你遇到的Expected 0 type arguments, but got 1报错，是因为用forwardRef封装的Table组件没有定义泛型参数，导致TS判定传入的类型参数不符合组件预期。下面是具体的修改方案：

步骤1：给Table组件添加泛型支持 #

在Table.tsx中，需要定义泛型Props，并使用泛型版本的forwardRef来创建组件：

import React, { forwardRef } from 'react';
import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

// 定义支持泛型的Table Props，继承AgGridReact的Props并绑定行数据类型T
type TableProps<TData> = AgGridReactProps<TData>;

// 泛型forwardRef：第一个参数是ref指向的AgGrid实例类型，第二个是组件Props类型
const Table = forwardRef<AgGridReact<TData>, TableProps<TData>>((props, ref) => {
  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact ref={ref} {...props} />
    </div>
  );
});

export default Table;

步骤2：在App.tsx中正确传递泛型类型 #

现在可以直接给Table组件传入行数据的泛型类型，同时获得完整的TS类型提示：

import React from 'react';
import Table from './Table';

// 定义你的行数据类型
interface RowData {
  id: number;
  name: string;
  age: number;
}

const App = () => {
  const rowData: RowData[] = [
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 },
  ];

  const columnDefs = [
    { field: 'id' },
    { field: 'name' },
    { field: 'age' },
  ];

  return (
    <div>
      <h1>AgGrid 泛型示例</h1>
      <Table<RowData>
        rowData={rowData}
        columnDefs={columnDefs}
        pagination={true}
      />
    </div>
  );
};

export default App;

关键说明 #

• forwardRef的泛型参数：第一个参数指定ref指向的实例类型（这里是AgGridReact<TData>），第二个参数绑定组件的泛型Props，确保TS能识别传入的类型参数。
• 通过继承AgGridReactProps<TData>，可以直接复用AgGrid的所有Props，同时让行数据、列定义等属性自动获得类型约束。

内容的提问来源于stack exchange，提问作者arunmmanoharan