Es6解构

要理解它们的区别,首先需要知道它们的输出方式。

万一 React

const Component = ...
...
...
export Component;

React.Component 你可以像 import { Component } from 'react';

这些在显微镜下的观察方式是:

default.Component
...

default 对象。

console.log 属于 theme ,你会明白我的意思的。

我希望这有道理。

我们再深入一点。

假设您有以下代码位:

const a = {
    test: 'hello',
};

const b = {
    foo: 'bar',
}

export default a;

现在,让我们 import 那个

import * as theme from './test.js'

console.log( theme )

{ default: { test: 'hello' } }

这是什么节目?这意味着 export 文件的对象包含 违约 import theme from 'test' . 但是,如果您有多个 编译器为您提供了选择的选项,但同时也为您提供了 反对只是为了退后。

违约 . 当你这么做的时候 import theme from './theme' 一切正常。但是,当你这么做的时候 { PRIMARY_COLOR }... 它试图找到像这样的东西

export PRIMARY_COLOR...

我希望这能说清楚!:)

{} 导入中的语法用于“命名”导入,而不是分解。

import theme from '../../../themes/default';

const { PRIMARY_COLOR } = theme;