react-create-app 中的对象解构
object destructuring in react-create-app
在名为 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
你有的是 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';
在名为 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
你有的是 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';