Es6解构

Question

我有一个与此类似的文件：

const COLORS = {
  PRIMARY_COLOR: 'red',
  SECONDARY_COLOR: 'green'
};

const APP = {
  APP_COLOR: GRAY_DARK,
  APP_FONT_SIZE: FONT_SIZE_NORMAL,
  APP_FONT_WEIGHT: FONT_WEIGHT_NORMAL,
  APP_SEPARATOR_COLOR: GRAY_LIGHT
};

export default {
  ...COLORS,
  ...APP
};

问题是当我试图从另一个文件中解构该对象时，我得到了未定义的值？

import theme, { PRIMARY_COLOR } from '../../../themes/default';

打印主题对象工作正常但打印PRIMARY_COLOR未定义

有帮助吗？

Answer 1

要了解差异，首先需要了解它们的导出方式。

在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对象包含default属性，当我们执行类似import theme from 'test'的操作时，该属性会自动加载到内存中。但是，如果您有多个export，编译器会为您提供选择选项，但同时为您提供default对象以供回退。

在您的情况下，您已导出default下的所有内容。当你做import theme from './theme'一切正常。然而，当你做{ PRIMARY_COLOR }...时，它试图找到像导出的东西

export PRIMARY_COLOR...

我希望这说清楚！ :)

Answer 2

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

这样做：

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

const { PRIMARY_COLOR } = theme;