元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。 ReactJS

Question

无法解决此问题。每当我导入布局时，都会出现上述错误。 当我导入其他组件时，它们工作正常。起初，我认为Layout是保留名称，所以我对其进行了更改，但仍然遇到相同的错误。

App.js

import React, { Component } from 'react';
import Layout from "./components/Layout/Layout";

class App extends Component {
  render() {
    return (
      <div>
        <Layout />
      </div>
    )
  }
}

export default App

Layout.js

import React, { Component } from 'react'
import Footer from '../Footer/Footer'
import Quotes from '../Quotes/Quotes'
import './Layout.css'

class Layout extends Component {
    render() {
        return (
            <div className='bgImg'>
                <div className='centered text-center align-items-center justify-content-center'>
                    <Quotes />
                </div>
                <Footer />
            </div>
        )
    }
}

export default Layout

Answer 1

该错误告诉您应该怎么做。
首先，请确保正确导出组件：

/* relevant imports */

class Quotes extends Component {
  /* component code */
}

export default Quotes

第二个让您在Layout组件中使用正确的导入语义：

import Quotes from '/path/to/your/component';

代替

import {Quotes} from '/path/to/your/component';