组件文件没有导入 webpack 反应项目？

Question

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

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，所以它变成了 run/compiled。如果我将 IntroductionPage 组件定义移动到 index.js，一切正常。不知何故，我在 import/export 步骤中丢失了它。

为什么会这样？

Answer 1

你应该试试这个 package.json 并安装反应的样板。 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"
  }
}

然后转到cmd并一一编写这些命令：

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

Answer 2

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

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

查看 MDN 上的 import docs——如果您使用 export default 作为您的 class，那么当您像这样导入它时不需要括号。

Answer 3

我想对在 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'

组件文件没有导入 webpack 反应项目？

Component files not importing in webpack react project?

reactjs

webpack

webpack-dev-server