时间戳

首页 > 解决方案 > React Data Grid 编译失败

reactjs - React Data Grid 编译失败

问题描述

我最近安装了 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;

谢谢！

标签： reactjsreact-data-grid

解决方案

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

由于它尚未被转换为与您运行代码的环境兼容的东西，因此您需要自己通过使用插件配置 babel 来处理它。

以下是处理此问题的 babel 插件：

我在基于 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"
  ]
}

推荐阅读