Question

我可以看到有两种不同的导入方式

import React from 'react'
import { render } from 'react-dom'

第二个有括号。那两者有什么区别？什么时候应该添加括号？感谢

Answer 1

你是否应该在括号内导入组件或没有它之间的区别在于你export的方式。

有两种类型的出口

默认导出
命名导出

组件可以具有一个默认导出，零个或多个命名导出

如果组件是默认导出，则需要不带括号导入它 E.g。

export default App;

将其导入为

import App from './path/to/App';

命名导出可能类似于

export const A = 25;

或

export {MyComponent};

您可以将其导入为

import {A} from './path/to/A';

或

import {A as SomeName} from './path/to/A';

如果您的组件有一个默认导出和几个命名导出，您甚至可以在导入时将它们混合在一起

import App, {A as SomeName} from './path/to/file';

同样，对于react和react-dom，React和ReactDOM分别为default exports，而Component例如named export 1 {} react和render是react-dom中的命名导出。这就是你可以做的原因

import ReactDOM from 'react-dom';

然后使用

ReactDOM.render()

或者像你问题中提到的那样使用它。

Answer 2

考虑primitives.js，

export default (a, b) => a + b;
export const sub = (a, b) => a - b;
export const sqr = a => a**2;

可以这样导入，

import sum, { sub, sqr } from './primitives';

在这种情况下，sum称为“默认导出”，模块可能只包含一个“默认导出”。

sub和sqr称为“命名导出”，模块可能包含多个命名导出。

Answer 3

如果您默认导出，则无需添加括号。您只能在模块中使用默认值。

情形1：

导出默认功能（num1，num2）{ return num1 + num2; }

情况2：

函数sum（num1，num2）{       return num1 + num2; }

export {sum as default};

案例3：

函数sum（num1，num2）{ return num1 + num2; }

导出默认总和;

您可以导入默认

从＆＃34; ./ test.js＆＃34;;
导入总和
console.log（sum（1,2））;

Answer 4

大括号用于导入single(specific) property，而没有括号的单词是import entire object组成的文件。

例如

import React, { Component } from 'react';

React代表从文件entire object导入'react'

{Component}表示我们指定从文件中导入particular property。

Answer 5

首先，非常感谢其他所有答案。这是以上所有内容的总结，一个答案。

带有示例的上下文

import React from 'react';          // importing without braces
import { render } from 'react-dom'; // importing with braces

要了解import，首先了解export及其类型很重要

出口类型

主要有两种类型的导出，即“默认”和“命名”。是否使用花括号，完全取决于要导入的导出变量的类型。因此，简短的答案是，默认情况下导出的变量不需要大括号，但是确实需要使用大括号导入命名变量。

现在，让我们看一下如何导入和导出这两种类型的一些实际示例。

默认：如何导出和导入

导出

// Module1.js
export default App;

// Module2.js
export default myVariable;

// Module3.js
export default myFunction;


// please note that there can only be one default export per module!

导入

import App from './Module1'
import AppRenamed from './Module1'

import myVariable from, './Module2'
import myFunction from './Module3'


// please note that default modules can be renamed when importing 
// ... and they will still work!

命名：如何导出和导入

导出

export const A = 42
export const myA = 43
export const Something = 44

export { cube, foo, graph };

// note how there can be several named exports per module
// exported in groups or individually

导入

import { A, myA } from './my-module.js';
import { Something as aRenamedVar } from './my-module.js';
import { cube } from './my-module.js';
import { foo, graph } from './my-module.js';

// likewise, named exports can be imported in groups or individually

其他说明

让我们回顾一下上面看到的第一个示例

import React from 'react'
import { render } from 'react-dom'

请注意，尽管React不使用花括号，而render使用了括号，但render实际上是react-dom的一部分。
因此，也可以导入整个默认值react-dom 没有大括号，然后使用render

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render()

在ES6导入语句中使用Curly Braces有什么用

5 个答案: