React 类型错误: 'columns' 属性不存在，如何解决？

在使用 React 的 EditableProTable 组件时，你可能会遇到以下类型错误：

不能将类型“{ columns: ProColumns[]; editable: { type: string; editableKeys: Key[]; onSave: (rowKey: any, row: any) => Promise; onChange: Dispatch<...>; actionRender: (row: any, config: any, defaultDoms: any) => any[]; }; }”分配给类型“IntrinsicAttributes & { children?: ReactNode; }”。 类型“IntrinsicAttributes & { children?: ReactNode; }”上不存在属性“columns”。ts(2322)

这个错误意味着你在使用 EditableProTable 时，没有正确地传递 columns 属性，导致类型检查失败。

为了解决这个问题，你需要将 React.FC 改为具有 Props 属性的接口，并在该接口中定义 columns 和 editable 的类型。然后将该接口作为泛型参数传递给 EditableProTable 组件。

以下是一个修正后的代码示例：

import React from 'react';
import { EditableProTable, ProColumns } from '@ant-design/pro-table';

interface ConfigCoreTableProps {
  columns: ProColumns<CoreRoleConfigListItem>[];
  editable: {
    type: string;
    editableKeys: Key[];
    onSave: (rowKey: any, row: any) => Promise<void>;
    onChange: Dispatch<...>;
    actionRender: (row: any, config: any, defaultDoms: any) => any[];
  };
}

const ConfigCoreTable: React.FC<ConfigCoreTableProps> = ({ columns, editable, ...props }) => {
  return (
    <EditableProTable
      {...props}
      columns={columns}
      editable={editable}
      rowKey='id'
      options={false}
      scroll={{ y: 600 }}
      cardProps={{ bodyStyle: { padding: 0 } }}
      recordCreatorProps={false}
      bordered
    />
  );
};

export default ConfigCoreTable;

在这个示例中，我们定义了一个 ConfigCoreTableProps 接口，它包含了 columns 和 editable 的类型。然后，我们将 ConfigCoreTable 组件定义为 React.FC<ConfigCoreTableProps>，并使用 columns 和 editable 属性传递给 EditableProTable 组件。

通过这种方式，我们可以确保传递给 EditableProTable 组件的属性类型正确，避免类型错误。