reactjs - webpack React 项目中未导入组件文件？

Question

我已经设置了一个非常简单的 React 应用程序，但无法将任何组件导入到 index.js。我的index.js，其中包含我的main <App /> 的定义类，工作正常，并且有这一行，例如:

import { IntroductionPage } from './Components/IntroductionPage.js';

有了从IntroductionPage.js导出的IntroductionPage组件的良好定义，我得到的是一个关于IntroductionPage在index.js中未定义的错误:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `App`.
    in App

我不知道要改变什么——我可以看到IntroductionPage.js的console.log输出，所以它正在运行/编译。如果我将IntroductionPage 组件定义移动到index.js 中，一切都会很好。不知何故，我在导入/导出步骤中丢失了它。

为什么会发生这种情况？

Answer 1

我想对在 React 中工作的导入和导出场景提供更多解释。

这是默认导入:

// App.js
import IntroductionPage from './IntroductionPage'

仅当 IntroductionPage 包含默认导出时才有效:

// IntroductionPage.js
export default 50

在这种情况下，导入时分配给它什么名称并不重要:

// App.js
import IntroductionPage from './IntroductionPage'
import MySample from './IntroductionPage'
import Test from './IntroductionPage'

因为它始终会解析为 IntroductionPage 的默认导出。

<小时/>

这是一个名为 IntroductionPage 的命名导入:

import { IntroductionPage } from './IntroductionPage'

仅当 IntroductionPage 包含名为 IntroductionPage 的命名导出时才有效:

export const IntroductionPage = 52

在这种情况下，名称很重要，因为您通过导出名称导入特定事物:

// App.js
import { IntroductionPage } from './IntroductionPage'
import { mySample } from './IntroductionPage' // Doesn't work!
import { Test} from './IntroductionPage' // Doesn't work!

要使这些工作正常进行，您需要将相应的命名导出添加到IntroductionPage:

// IntroductionPage.js
export const IntroductionPage = 50
export const mySample = 51
export const Test= 52

一个模块只能有一个默认导出，但可以有任意多个命名导出(零个、一个或多个)。您可以将它们一起导入:

// App.js
import IntroductionPage, { mySample, Test } from './IntroductionPage'

在这里，我们将默认导出导入为IntroductionPage，并分别将命名导出称为mySample 和Test。

// IntroductionPage.js
export default 50
export const mySample= 51
export const Test= 52

我们还可以在导入时为它们分配不同的名称:

// App.js
import X, { mySample as myTest, Test as myTest2} from './IntroductionPage'