Javascript Es6解构

我有一个类似的文件：

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';

打印主题对象效果很好 但是打印原色没有定义

有什么帮助吗？

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

只要这样做：

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

const { PRIMARY_COLOR } = theme;

---

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

在React的情况下，导出是这样的

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

这在React.Component下可用，您可以像从'React'导入{Component}一样导入它

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

default.Component
...

而其他所有内容都在默认对象下

如果你做一个主题的快速console.log，你就会明白我的意思

我希望这是有道理的

让我们深入一点

假设您有以下代码位：

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

const b = {
    foo: 'bar',
}

export default a;

现在，让我们导入它

当我们执行console.log主题时，我们得到

这是什么节目？这意味着文件的导出对象包含一个默认属性，当我们执行类似于从“test”导入主题的操作时，该属性会自动加载到内存中。但是，如果您有多个导出，编译器会为您提供拾取和选择选项，但同时会为您提供一个默认对象以供回滚

在您的情况下，您已经在默认情况下导出了所有内容。当您从“./theme”导入主题时，一切正常。但是，当您执行{PRIMARY_COLOR}时。。。它试图找到像这样输出的东西

export PRIMARY_COLOR...

---

我希望这能说明问题！：

行吗？什么？我得到了类似的结果：{APP_COLOR:'000000'，PRIMARY_COLOR:'ff0000'}我已经添加了一个答案来解释这个差异。看看有没有道理！：导入不进行分解。它允许您导入命名的导出，而您没有命名的导出。但是我以前做过类似的事情，它可以很好地从'React'导入React，{Component}；搞不懂difference@HendEl-Sahli这是因为React既有命名导出，也提供了一个默认导出对象，其中所有命名导出都是属性，这是一个可怕的反模式，会导致很多混乱。明白了。。。非常感谢你的帮助：。。没错。。。真的有点困惑

{ default: { test: 'hello' } }

export PRIMARY_COLOR...