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

为什么会发生这种情况？

Answer 1

我想对在反应中起作用的导入和导出方案给出更多解释。

这是默认导入：

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'的名为import ：

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.js export default 50 export const mySample= 51 export const Test= 52

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

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

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

info = ActiveRecord::Base.connection.execute("SELECT * FROM #{form_name} WHERE EmailAddress = \"#{user_em}\";")

Answer 2

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

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

查看MDN上的import docs - 如果您在课堂上使用export default，则在导入时不需要括号。

Answer 3

你应该试试这个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

未在webpack中导入的组件文件是否反应项目？

3 个答案: