reactjs - react 数据网格无法编译

Question

我最近安装了 react-data-grid 组件，并开始尝试测试它。它应该从文档中工作，但我收到一个我不理解的编译错误。我会很感激一些帮助。谢谢。

错误如下。我得到了

./node_modules/react-data-grid/lib/DataGrid.js 102:37
Module parse failed: Unexpected token (102:37)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   const totalHeaderHeight = headerRowHeight + (enableFilters ? headerFiltersHeight : 0);
|   const clientHeight = height - 2 // border width
>   - totalHeaderHeight - (summaryRows?.length ?? 0) * rowHeight - (totalColumnWidth > viewportWidth ? getScrollbarSize() : 0);
|   const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(clientHeight, rowHeight, scrollTop, rows.length);
|   /**

这是我的代码:

import React from 'react';
import ReactDataGrid from 'react-data-grid';
import './App.css';

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' },
  { key: 'count', name: 'Count' }];

const rows = [{ id: 0, title: 'row1', count: 20 }, { id: 1, title: 'row1', count: 40 }, { id: 2, title: 'row1', count: 60 }];

function App() {
  return (
    <ReactDataGrid
      columns={columns}
      rowGetter={i => rows[i]}
      rowsCount={3}
      minHeight={150} />
  );
}

export default App;

谢谢!

Answer 1

我认为问题在于 react-data-grid 代码正在使用 ES2020 中引入的无效合并和可选链接。请参阅错误消息中突出显示的此代码段:summaryRows?.length ?? 0。

由于尚未将其转换为与您运行代码的环境兼容的内容，因此您需要通过使用插件配置 babel 来处理此问题。

这里是处理这个问题的 babel 插件:

• https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator
• https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

我在基于 Create React App 的项目中遇到了同样的问题，并通过将 IE 11 添加到 package.json 中 browserslist 属性的两个数组中解决了这个问题。

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all",
    "IE 11"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version",
    "IE 11"
  ]
}