为什么“从'react'导入{React};“不行？

Question

谁能向我解释为什么

import { React } from 'react';

一切都破了

import React from 'react';

工作正常吗？他们不是在说同样的话吗？我试图在文档和互联网上的其他地方找到答案，但我不知道。我认为这可能与Babel有关？

如果有帮助，这里是我的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

根据mdn， import { someFunction } from './path';就是这样

imports

这基本上意味着，如果一个软件包默认导出某些内容，则应在导入时不带import defaultExport from "module-name"; import { export } from "module-name"; 且使用您选择的任何名称。当程序包以命名导出方式导出内容时，应将其与{}一起使用。

{}软件包默认导出react，每个软件包只能有一个默认React。

Answer 2

默认出口和命名出口之间的区别。

默认导出

react.js

x86_64-linux-android

您可以在项目中将上述文件class React { render() { // some code... } } export default React; 导入

react.js

命名出口

react.js

import React from "./react.js";

然后，您必须将上述文件export class React { render() { // some code... } } export const Component = () => { // some code... }; 导入到项目中，例如

react.js

TL; DR-了解来自here

的默认导出和命名导出

Answer 3

<div class="root"> <div class="child1">Hi I am child1 of root <div class="child12">child2</div> <div class="child13">child3</div> <div class="child14">child4</div> </div> </div>

这基本上是说：“从import React from 'react'模块中找到默认导出，并将其导入为我想调用的react常量。”

React

这是“从明确命名为import { React } from 'react'的{​​{1}}模块中查找导出，并将其作为我想调用的react常量导入此处。”

React为什么不起作用？

因为React软件包中没有名为import { React } from 'react'的导出。 There is only a single default export。如果这样做，您会发现React是react。

但是它甚至看起来都不像我在代码中使用React。所以，难道我不能随便命名吗，例如undefined？

不，对不起。您需要导入默认名称并将其命名为React。这是因为只要您编写import Foobar from 'react'或React之类的JSX代码，此JSX代码就会被转译并使用<MyComponent />。因此，您需要有权访问<App />。

---

有用的参考文献：

• ES6 syntax and usage of import

Answer 4

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

因此，String s = Stream.of(str1, str2, str3) .filter(Objects::nonNull) .findFirst() .orElse(str4); 将具有相同的功能。

明确定义了其他导出内容，这就是命名很重要的原因。

其他出口可能看起来像这样：

import RandomName from 'react';

要导入，请执行module.exports = { someFunction: doSomething(), ... // more exports } 。您可以看到我们正在从导出对象中解构（解压缩）名称。

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