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

Es6解构

destructuring ecmascript-6 javascript

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

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 回复 | 直到 6 年前

weirdpanda 6 年前

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

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

我希望这能说清楚!:)

M. Chyb 6 年前

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

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

const { PRIMARY_COLOR } = theme;

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前