代码之家 › 专栏 › 技术社区 › Hend El-Sahli

Es6解构

destructuring ecmascript-6 javascript

0

Hend El-Sahli · 技术社区 · 7 年前

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

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

有什么帮助吗?

2 回复 | 直到 7 年前

1

0

weirdpanda 7 年前

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

万一 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...

我希望这能说清楚!:)

2

1

M. Chyb 7 年前

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

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

const { PRIMARY_COLOR } = theme;