Reactjs ag-grid 模块转换 - Module[] 不可分配给类型 (/ag-grid-community/dist/lib/interfaces/iModule).Module[]

Question

我在 typescript react 应用程序中使用 ag-grid 企业版。它工作得很好，但是当我添加下面的行来实现详细的网格功能时，它会抛出编译错误，如下所述。

modules={masterDetailModule} <--- this is the line giving the compile error.

没有与此调用匹配的过载。重载 1 of 2，'(props: AgGridReactProps | Readonly): AgGridReact'，出现以下错误。类型 'import("../node_modules/@ag-grid-community/core/dist/cjs/interfaces/iModule").Module[]' 不可分配给类型 'import("../node_modules/ag-grid-community/dist/lib/interfaces/iModule").Module[]'。

Gridview.tsx

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { MasterDetailModule } from '@ag-grid-enterprise/master-detail';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

interface IGridview {
  columnMetadata: any;
  data: any;
  rowSelection?: string;
  overlayNoRowsMessage?: string;
  detailCellRendererParams?: any;
  isRowMaster?: any;
}

const Gridview: React.FC<IGridview> = (props) => {
  const {
    columnMetadata,
    data,
    rowSelection = 'single',
    overlayNoRowsMessage = 'No results',
    detailCellRendererParams,
    isRowMaster,
  } = props;

  const masterDetailModule = [ClientSideRowModelModule, MasterDetailModule];
  return (
    <div className="ag-theme-balham" style={{ height: 700, width: 1800 }}>
      <AgGridReact
        rowData={data}
        columnDefs={columnMetadata}
        overlayNoRowsTemplate={overlayNoRowsMessage}
        rowSelection={rowSelection}
        masterDetail={true}
        modules={masterDetailModule}
        isRowMaster={isRowMaster}
        detailCellRendererParams={detailCellRendererParams}
      ></AgGridReact>
    </div>
  );
};

export default Gridview;

这是我的 package.json 文件。

  {
  "name": "react-aggrid",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
 "dependencies": {
    "@ag-grid-community/react": "^25.3.0",
    "@ag-grid-community/client-side-row-model": "^25.3.0",
    "@ag-grid-community/csv-export": "^25.3.0",
    "@ag-grid-enterprise/excel-export": "^25.3.0",
    "@ag-grid-enterprise/master-detail": "^25.3.0",
    "ag-grid-community": "^25.3.0",
    "ag-grid-enterprise": "^25.3.0",
    "ag-grid-react": "^25.3.0"
    }
  "devDependencies": {
    "@sheerun/mutationobserver-shim": "^0.3.3",
    "@testing-library/jest-dom": "^5.11.0",
    "@testing-library/react": "^10.4.6",
    "@testing-library/user-event": "^12.0.11",
    "@types/jest": "^25.2.1",
    "@types/lodash": "^4.14.162",
    "@types/node": "^13.13.4",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.7",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.5",
    "cross-env": "^7.0.3",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "jest-environment-jsdom-sixteen": "^1.0.3",
    "msw": "^0.19.3",
    "npm-run-all": "^4.1.5",
    "react-scripts": "^3.4.1",
    "redux-logger": "^3.0.6",
    "typescript": "^3.8.3"
  }
}

Answer 1

你正在混合 modules and packages。

You cannot mix packages and modules - in other words you cannot have a mix of the following types of dependencies:

"dependencies": {
    "ag-grid-community": "~25.3.0" <- a package dependency
    "@ag-grid-enterprise/all-modules": "~25.3.0"  <- a module dependency
    //...other dependencies...
}

所以在你的项目中，替换这一行：

import { AgGridReact } from 'ag-grid-react';

使用以下行：

import { AgGridReact } from '@ag-grid-community/react';

然后替换以下行：

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

使用以下行：

import '@ag-grid-community/core/dist/styles/ag-grid.css';
import '@ag-grid-community/core/dist/styles/ag-theme-alpine.css';

Reactjs ag-grid 模块转换 - Module[] 不可分配给类型 (/ag-grid-community/dist/lib/interfaces/iModule).Module[]

Reactjs ag-grid Module conversion - Module[] is not assignable to type (/ag-grid-community/dist/lib/interfaces/iModule).Module[]

reactjs

ag-grid

ag-grid-react