组件文件在Webpack React项目中无法导入？

Question

我已经搭建了一个相当简单的React应用程序，但是我的组件无法导入到index.js中。我的index.js包含了我主要的<App />类的定义，它可以正常工作，并且例如有这一行：

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

在 IntroductionPage.js 文件中定义了 IntroductionPage 组件，但是在 index.js 文件中却提示 IntroductionPage 未定义的错误：

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中，一切都很顺利。不知何故，在导入/导出步骤中我失去了它。

为什么会发生这种情况？

- temporary_user_name

---

你能给我看一下你的IntroductionPage.js的代码吗？你可以试着将import语句中的大括号去掉，只用以下代码： import IntroductionPage from './Components/IntroductionPage.js'; - MattYao

我们有一个赢家...去掉括号就解决了。谢谢。 - temporary_user_name

你应该将那个评论变成一个答案。 - temporary_user_name

好的，现在就翻译 :) - MattYao

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'

- Keshan Nageswaran

Answer 2

请尝试仅使用以下代码从导入中移除括号：

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

请查看MDN上的import文档-- 如果您在使用export default来导出类时，导入时不需要加括号。

- MattYao

Answer 3

你应该尝试使用package.json并安装React的样板文件。 这里是package.json文件：

    {
  "name": "bp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

然后打开命令提示符，逐个输入以下命令：

> npm install
> npm install -g create-react-app
> create-react-app my-app
> 
> cd my-app npm start

- Aashir Haque

---

我理解你的想法，重置所有配置以消除可能是某些神秘配置错误的可能性，但最终我需要比“重新开始”更好的解决方案。顺便说一下，欢迎来到 Stack Overflow！ - temporary_user_name