为了账号安全,请及时绑定邮箱和手机立即绑定

ES6 import语句中的花括号有什么用

/ 猿问

ES6 import语句中的花括号有什么用

繁华开满天机 2019-11-14 15:33:00

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


import React from 'react'

import { render } from 'react-dom'

第二个有括号。那么两者之间有什么区别?什么时候应该加上括号?谢谢


查看完整描述

3 回答

?
catspeake

那么,是否应该在方括号中导入组件之间的区别在于您的方式export。


出口有两种类型


默认导出

命名为出口

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


如果组件是默认导出,则需要不带括号将其导入,例如


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在react和render是在一个名为出口react-dom。那就是你要么做的原因


import ReactDOM from 'react-dom';

然后使用


ReactDOM.render()

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


查看完整回答
反对 回复 2019-11-14
?
繁花如伊

考虑一下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称为“命名导出”,并且一个模块可以包含多个命名导出。


查看完整回答
反对 回复 2019-11-14
?
千万里不及你

花括号用于导入single(specific) property,而没有花括号的单词是import entire object该文件的形式。


例如。,


import React, { Component } from 'react';

这里的单词React代表entire object从文件导入'react'


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


查看完整回答
反对 回复 2019-11-14

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信