错误的渲染方法ReactJs

Question

当我运行我的ReactJS应用程序时（在浏览器和终端中），我不断收到此错误消息（请参见下面的第一张图片）。

浏览器中的错误消息：

我的问题是我已经导出了App.js文件。所以我不明白错误消息是从哪里来的。我在该应用程序中的所有其他文件也已正确导出。

代码编辑器中的代码：

这是我的代码，来自App.js文件：

import React, { Component } from 'react';
//import 'bootstrap/dist/css/bootstrap.css';
import Navigation from './Components/Navigation';
import SideNavigation from './Components/SideNavigation';
import Backdrop from './Components/Backdrop';
//import DrawerToggleButton from './Components/DrawerToggleButton';
import About from './Components/About';
//import Portfolio from //'./Components/Portfolio';
import Contact from './Components/Contact';
import Footer from './Components/Footer';
import './App.css';


class App extends Component {
 render() {
   return(
    <div>
     <Navigation />
     <SideNavigation />
    <Backdrop />
    {/* <DrawerToggleButton /> */}
    <About />
    {/* <Portfolio /> */}
    <Contact />
   <Footer /> 
    </div>

   )
    }
  }

  export default App;

Answer 1

您可能会遇到此错误的原因有很多。 1）如果您的应用组件看起来像这样export const App = () => ....all your code， 尝试像这样import {App} from './App'

导入您的App组件

2）尝试使用类似export default class App extends React.Component的类制作您的App组件

希望这会有所帮助。