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

导入中的 {} 语法用于 "named" 导入，而不是解构。

只需这样做：

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

const { PRIMARY_COLOR } = theme;

Answer 2

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

在 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...

我希望这能说明问题！ :)

Es6 解构

Es6 Destructuring

javascript

destructuring

ecmascript-6