ecmascript-6 - es6 导入 'destructuring' 不工作

Question

嘿，我有这样的 uiTypes.js 文件:

export default {
  SELECT_ITEM: 'SELECT_ITEM',
  DESELECT_ITEM: 'DESELECT_ITEM',
  TOGGLE_ITEM: 'TOGGLE_ITEM',
}

当我尝试像这样导入其内容时，它可以工作:

import uiTypes from './uiTypes';
console.log(uiTypes.SELECT_ITEM) // 'SELECT_ITEM'

但不是这样:

import { SELECT_ITEM, DESELECT_ITEM, TOGGLE_ITEM } from './uiTypes';
console.log(SELECT_ITEM) // undefined,

我错过了什么吗？

Answer 1

导入没有解构(还要注意导出和导入使用关键字 as 而不是冒号以避免与对象混淆)。您可以导入默认导出、单个命名导出或模块命名空间对象。

您尝试导入三个命名导出，而只有一个默认导出；这就是它失败的原因。

您应该使用命名导出:

export const SELECT_ITEM = 'SELECT_ITEM';
export const DESELECT_ITEM = 'DESELECT_ITEM';
export const TOGGLE_ITEM = 'TOGGLE_ITEM';

或在导入对象后使用“真实”解构:

import uiTypes from './uiTypes';
const {SELECT_ITEM, DESELECT_ITEM, TOGGLE_ITEM} = uiTypes;