es6进口'破坏'不行 [英] es6 import 'destructuring' not working

问题描述

 导出默认值{
 SELECT_ITEM：'SELECT_ITEM '，
 DESELECT_ITEM：'DESELECT_ITEM'，
 TOGGLE_ITEM：'TOGGLE_ITEM'，
} 
  

当我尝试导入其内容时，它的工作原理：

 从'./uiTypes导入uiTypes ; 
 console.log（uiTypes.SELECT_ITEM）//'SELECT_ITEM'
  

但不是这样：

 从'./uiTypes'导入{SELECT_ITEM，DESELECT_ITEM，TOGGLE_ITEM}; 
 console.log（SELECT_ITEM）// undefined，
  

我错过了什么？ p>

解决方案

导入没有破坏（请注意，导出和导入使用关键字为而不是冒号以避免与对象混淆）。您可以导入默认导出，单个命名导出或模块命名空间对象。

您尝试导入三个命名的导出，而只有一个默认的导出;

您应该使用命名导出：

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

或在导入对象后使用真实解构：

 从'./uiTypes'导入uiTypes; 
 const {SELECT_ITEM，DESELECT_ITEM，TOGGLE_ITEM} = uiTypes; 
  

Hey there I have this uiTypes.js file like this:

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

And when I try importing its content like so, it works:

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

But not like this:

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

Am I missing something?

解决方案

There is no destructuring for imports (notice also that exports and imports use the keyword as instead of a colon to avoid confusion with objects). You can either import the default export, individual named exports, or the module namespace object.

Your attempt is trying to import three named exports, while there is only a default export; that's why it's failing.

You should use named exports:

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

or use "real" destructuring after importing the object:

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

这篇关于es6进口'破坏'不行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！