尝试渲染图像时出现空白反应页面

Question

尝试渲染图像时出现空白反应页面。我正在使用 @material-ui/core 包并且它安装正确。

这是我正在使用的代码。

如有任何帮助，我们将不胜感激。

谢谢！

这是代码：

import React from 'react';
import { Container, AppBar, Typography, Grow, Grid } from '@material-ui/core';
import memories from './images/memories.png';

const App = () => {
    return (
        <Container maxWidth="lg">
            <AppBar position="static" color="inherit">
                <Typography variant="h2" align="center">Memories</Typography>
                <img src={memories} alt ="memories" heigth="60"/>
            </AppBar>
        </Container>
       
    );
}

export default App;

这是我在调试控制台中得到的结果：

语法错误：无法在模块外部使用 import 语句 在compileFunction（虚拟机：360：18） 在wrapSafe（内部/模块/cjs/loader：1088：15） 在 Module._compile （内部/模块/cjs/loader:1123:27） 在 Module._extensions..js （内部/modules/cjs/loader:1213:10） 在Module.load（内部/模块/cjs/loader：1037：32） 在 Module._load （内部/模块/cjs/loader:878:12） 在executeUserEntryPoint（内部/模块/run_main：81：12） 在（内部/主/run_main_module:23:47）

我尝试卸载并重新安装material-ui包，检查语法并确保“memories.png”图像位于正确的位置。

Answer 1

您错误地导入了组件。例如，根据 MUI 的 文档，您必须从 Container

 导入 

@mui/material/Container

。也许您也在 React 日志中看到了与此相关的错误（？）查看每个组件的文档，它们都有显示如何导入的代码片段。

Answer 2

这里是使用 import from '@mui/material' 更新后的代码；

import React from 'react';
import { Container } from '@mui/material';
import { AppBar } from '@mui/material';
import { Typography } from '@mui/material';

import memories from './images/memories.png';

const App = () => {
    return (
        <Container maxwidth="lg">
            <AppBar position="static" color='inherit'>
                <Typography variant="h2" align='center'>Memories</Typography>
                <img src={memories} alt='memories' height="60"/>
            </AppBar>
        </Container>
       
    );
}

export default App;

但是我仍然得到一个空白的反应页面和相同的日志在我的控制台中：

语法错误：无法在 Module._compile (internal/modules/cjs/loader:1123:27) 的 wrapSafe (internal/modules/cjs/loader:1088:15) 的compileFunction (vm:360:18) 的模块外部使用 import 语句）在Module._extensions..js（内部/模块/cjs/loader：1213：10）在Module.load（内部/模块/cjs/loader：1037：32）在Module._load（内部/模块/cjs/loader） ：878：12）在executeUserEntryPoint（内部/模块/ run_main：81：12）在（内部/主/ run_main_module：23：47）