我使用 react
来构建我的组件库。我需要一个 index.js
来将所有组件导入一个地方。
像这样:
MyComponents/
Button.js
Label.js
index.js
在 index.js
中,我接下来尝试做的是:
// this export nothing
export {default} from './Button';
// this tells me about syntax error
export default from './Button';
我发现只有这个解决方案有效
import Button from './Button';
export default Button;
但我发现一些 React 组件库使用我上面提到的语法(export default from './Button'
)——并且它以某种方式工作。看起来他们使用一些 babel-plugin-transform-*
来做到这一点。
请找我了解如何将我的两行 import export 转换为一行 export ... from ...
。谢谢。
附言最后我需要这样做:import Button from './MyComponents';
最佳答案
使用以下语法:
File: layouts/index.js
export {default as Flex} from './flex'
export {default as Grid} from './grid'
export {default as Dock} from './dock'
然后就可以使用了
import { Dock, Grid } from 'layouts'
或
import layouts from 'layouts'
<layouts.Flex >...</layouts.Flex>
为了导出由上述方法创建的嵌套索引,您可以使用 export *
语法:
File: icons/index.js
export * as action from './action';
export * as alert from './alert';
export * as av from './av';
用法:
import * as icons from 'material/icons'
<icons.action.Close />
关于javascript - "export default from"不适用于 Babel React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41028317/