React 和 MaterialUI - 使用论文的 GridLayout

Posted 2023-02-22

【中文标题】React 和 MaterialUI - 使用论文的 GridLayout

【英文标题】：React and MaterialUI - GridLayout using papers

【发布时间】：2020-03-24 23:05:51

【问题描述】：

我正在使用 react-grid-layout 库创建一个自适应网格，其中每个项目都是来自 react material ui 的纸质组件。

运行我在浏览器中收到的应用程序时遇到问题： “TypeError：react__WEBPACK_IMPORTED_MODULE_0___default.a.createContext 不是函数” “./node_modules/@material-ui/styles/esm/useTheme/ThemeContext.js”模块下

我对反应还很陌生，所以也许我做了一些非常愚蠢的事情，但我们将不胜感激，因为我有点无能:)

Home 组件是：

import  makeStyles  from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import  withStyles  from '@material-ui/styles';
import  Paper  from 'material-ui';
import React from 'react';
import GridLayout from 'react-grid-layout';

const useStyles = makeStyles(theme => (
    root: 
        padding: theme.spacing(3,2),
    ,
));

class Home extends React.Component 


    render() 
        var layout = [
            i: 'a', x: 0, y: 0, w: 1, h: 2, static: true,
            i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4,
            i: 'c', x: 4, y: 0, w: 1, h: 2
        ];

        const  classes  = this.props;

        return (
            <GridLayout className="layout" layout=layout cols=12 rowHeight=30 width=1200>
                <Paper className=classes.root>
                    <Typography key="a" variant="h5" component="h3">
                        This is a set of paper!
                    </Typography>
                </Paper>
                <Paper className=classes.root>
                    <Typography key="b" variant="h5" component="h3">
                        This is a set of paper!
                    </Typography>
                </Paper>
                <Paper className=classes.root>
                    <Typography key="c" variant="h5" component="h3">
                        This is a set of paper! 
                    </Typography>
                </Paper>
            </GridLayout>
        );
    


    /* 
    <MapContainer latitude=31.97973975 longitude=34.74769792490634/>
    */


export default withStyles(useStyles)(Home);

这是 App.js 文件：

import  MuiThemeProvider  from 'material-ui/styles';
import React from 'react';
import  BrowserRouter as Router, Route  from 'react-router-dom';
import './App.css';
import Home from './pages/Home';

class App extends React.Component 

    render() 
        return (
            <MuiThemeProvider>
                <Router>
                    <Route path="/" component=Home/>
                </Router>
            </MuiThemeProvider>
        );
    


export default App;

Package.json 依赖项

  "dependencies": 
    "@material-ui/core": "^4.7.0",
    "@material-ui/icons": "^4.5.1",
    "google-maps-react": "^2.0.2",
    "mobx": "^5.15.0",
    "prop-types": "^15.7.2",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-google-maps": "^9.4.5",
    "react-grid-layout": "^0.17.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0"

谢谢提醒！

【问题讨论】：

看来你需要更新 react。你用的是哪个版本？

我已经用我的依赖项修改了这个问题。为什么版本会导致这个错误？

【参考方案1】：

您可以在 Material-UI 文档 (https://material-ui.com/getting-started/installation/#npm) 中找到以下内容：

请注意，react >= 16.8.0 和 react-dom >= 16.8.0 是对等依赖项。

Material-UI v4 依赖于 React 钩子和上下文——它们都不在 React 15 中（显示在你的依赖项中）。