React Material UI DataGrid：无法读取未定义的属性 'useRef'

Question

问题

我正在尝试使用 React DataGrid. But I am getting a stacktrace in the browser where it caughts a TypeError: Cannot read property 'useRef' of undefined.

我尝试了什么

我尝试过使用不同版本的 React DataGrid。我也尝试了不同版本的 React Core / Styles。

我认为底层问题在哪里

我觉得跟Parcel Bundler有点关系。一位同事没有遇到这个问题，他正在使用 react-scripts。

我在用什么

我只是使用官方文档中的示例代码。如下所示。

import React, { Component } from 'react';
import './HomePage.scss';
import { DataGrid } from '@material-ui/data-grid';

const rows = [
    { id: 1, col1: 'Hello', col2: 'World' },
    { id: 2, col1: 'XGrid', col2: 'is Awesome' },
    { id: 3, col1: 'Material-UI', col2: 'is Amazing' },
];

const columns = [
    { field: 'col1', headerName: 'Column 1', width: 150 },
    { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default class HomePage extends Component {
    render() {
        return (
            <div style={{ height: 300, width: '100%' }}>
                <DataGrid rows={rows} columns={columns} />
            </div>
        );
    }
}

所以我觉得我的包裹更重要。我在下面列出了重要的。

"@material-ui/data-grid": "^4.0.0-alpha.37",
"@material-ui/core": "5.0.0-alpha.30",
"@material-ui/lab": "5.0.0-alpha.30",
"parcel-bundler": "^1.12.4",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"

欢迎任何见解。是否有人设法让 Material UI 使用 Parcel。如果是，您使用哪个版本？

更新

我收到了使用 material-ui 核心版本 4.12.3 的建议。但是，问题仍然出现。我现在使用的版本是：

"@material-ui/data-grid": "^4.0.0-alpha.37",
"@material-ui/core": "4.12.3",
"@material-ui/lab": "4.0.0-alpha.58",

重现步骤

Clone/download Repo
导航到文件夹
npm 安装
npm 启动

Answer 1

将你的@material-ui/core减少到4.12.3

Answer 2

问题已通过将 parcel 更新到版本 2 解决。

所以我删除了 >

"parcel-bundler": "^1.12.4"

然后我添加了 >

"parcel": "^2.0.0-rc.0"

React Material UI DataGrid：无法读取未定义的属性 'useRef'

React Material UI DataGrid: Cannot read property 'useRef' of undefined

javascript

cross-browser

reactjs

material-ui

React Material UI DataGrid：无法读取未定义的 属性 'useRef'

React Material UI DataGrid: Cannot read property 'useRef' of undefined

javascript

cross-browser

reactjs

material-ui

React Material UI DataGrid：无法读取未定义的属性 'useRef'