react-create-app 中的对象解构

Question

在名为 index.js 的文件中，我有以下导出：

export default {
  foo: true,
  bar: false
}

稍后在文件 home.js 中，我正在执行以下操作：

import { foo, bar } from './index'

console.log(foo, bar) -> undefined, undefined

如果我像这样导入所有内容：

import index from './index'

console.log(index) -> { foo: true, bar: false }

谁能解释一下为什么会这样？我做错了什么？

我正在使用：

› create-react-app -V 1.0.3

Answer 1

你有的是 named exports，不是解构。

您必须按原样导出它们，而不是 default export:

// this will export all of the defined properties as individual
// named exports, which you can pick-and-choose when importing
// using a similar syntax to destructuring
const foo = true, bar = false;
export {
  foo,
  bar
}

// imported exports named 'foo' and 'bar'
import { foo, bar } from './my-file'.

如果您指定 default 导出，那么当您不使用大括号导入时，关键字 default 后面的任何内容都将被导出：

// this exports an object containing { foo, bar } as the default export
export default {
  foo: true,
  bar: false
}

// imported without {}
import objectContainingFooBar from './my-file';

react-create-app 中的对象解构

object destructuring in react-create-app

javascript

reactjs

ecmascript-6

babeljs

create-react-app