Es6解构

Question

I have a file that is similar to this:

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

The issue is when I'm trying to destructure that object from another file, I get undefined values?

import theme, { PRIMARY_COLOR } from '../../../themes/default';

printing the theme object works fine but printing PRIMARY_COLOR gets undefined

Any help?

Answer 1

The {} syntax in imports is for "named" imports and is not destructuring.

Just do this:

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

const { PRIMARY_COLOR } = theme;

Answer 2

To understand the difference, you first need to know the way they are exported.

In case of React , the export goes something like this

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

This becomes available under React.Component and you can import it like import { Component } from 'react';

The way these look under the microscope is:

default.Component
...

While everything else is just under the default object.

If you do a quick console.log of theme , you'll understand what I mean.

I hope this makes sense.

---

Let's go a little in depth.

Suppose you have the following bit of code:

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

const b = {
    foo: 'bar',
}

export default a;

Now, let's import that

import * as theme from './test.js'

When we do a console.log( theme ) we get

{ default: { test: 'hello' } }

What does this show? It means that the export object of a file contains a default property which is automatically loaded into memory when we do something like import theme from 'test' . However, if you have more than one export , the compiler gives you the option to pick and choose, but at the same time, provides you with a default object just for fall back.

In your case, you have exported everything under the default . When you do import theme from './theme' all works fine. However, when you do { PRIMARY_COLOR }... it tries to find something which was exported like

export PRIMARY_COLOR...

I hope this makes it clear! :)