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

导入中的{}语法适用于“命名”导入，并且不构成破坏。

只需执行以下操作：

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销毁

2 个答案: