为什么"从'反应'导入{ React };"不起作用？

Question

谁能向我解释为什么

import { React } from 'react';

打破一切，然而

import React from 'react';

工作正常吗？他们不是在说同样的话吗？我试图在文档和互联网的其他地方找到答案，但我无法弄清楚。我想这可能和通天塔有关？

以下是我的 npm 包，如果有帮助的话：

"dependencies": {
"moment": "^2.18.1",
"prop-types": "^15.5.10",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router-dom": "^4.0.0",
"styled-jsx": "^3.2.1",
"uuid": "^3.2.1"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"eslint": "^4.13.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-react": "^7.5.1",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.29.0",
"react-hot-loader": "^3.0.0-beta.7",
"url-loader": "^0.6.2",
"webpack": "^3.4.0",
"webpack-dev-server": "^2.5.0"
}

Answer 1

import React from 'react'

这本质上是说"从react模块中找到默认导出并将其导入为我想调用React的常量。

import { React } from 'react'

这说"从显式命名为React的react模块中找到导出，并将其作为我想调用的常量导入React"。

为什么import { React } from 'react'不起作用？

因为react包中没有名为React的导出。只有一个默认导出。如果这样做，你会发现Reactundefined。

但它看起来甚至不像我在代码中使用React。所以，我不能随心所欲地命名它，比如import Foobar from 'react'吗？

不，对不起。您需要导入默认值并将其命名为React。这是因为每当你编写像<MyComponent />或<App />这样的JSX代码时，这个JSX代码都会被转译并使用React.createElement()。因此，您需要有权访问React.

---

有用的参考资料：

• ES6 语法和导入用法

Answer 2

区别在于默认导出和命名导出。

默认导出

反应.js

class React {
render() {
// some code...
}
}
export default React;

您可以在项目中导入上述文件react.js，例如

import React from "./react.js";

命名导出

反应.js

export class React {
render() {
// some code...
}
}
export const Component = () => {
// some code...
};

然后，您必须将上述文件react.js导入到项目中，例如

import { React, Component } from "./react.js";

TL;DR - 从此处了解默认导出和命名导出

Answer 3

根据 mdn，imports以这种方式工作

import defaultExport from "module-name";
import { export } from "module-name";

这基本上意味着，如果包默认导出某些内容，则应在没有{}的情况下导入它，并使用您选择的任何名称。当包将某些内容导出为命名导出时，应将其与{}一起使用。

react包默认导出React，每个包只能有一个默认export。

Answer 4

第二个有效，因为它是 React 包的默认导出。您实际上可以将其命名为任何名称，因为每个模块只有一个默认导出。

因此，import RandomName from 'react';将具有相同的功能。

导出的任何其他内容都是显式定义的，这就是命名很重要的原因。

其他导出可能如下所示：

module.exports = {
someFunction: doSomething(),
... // more exports
}

要导入它，您需要执行import { someFunction } from './path';.您可以看到我们正在从导出对象中解构(解压缩)名称。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment