[英]Export react jsx-components in index.js files
How can I bundle react-components, defined in jsx-files, in an index.js file?如何将在 jsx 文件中定义的 react-components 捆绑到 index.js 文件中?
In a way that the components can be accessed by import module from "/module"; let C = module.Component;
以某种方式可以通过
import module from "/module"; let C = module.Component;
来访问import module from "/module"; let C = module.Component;
import module from "/module"; let C = module.Component;
. .
With:与:
/module
index.js
Component.jsx
To re-export the component as a default export:要将组件重新导出为默认导出:
export { default } from './Component';
To re-export the component as a named export:要将组件重新导出为命名导出:
export { default as NamedComponent } from './Component';
You should prefer exporting as default from index.js
since it will likely be the only export from the index.您应该更喜欢从
index.js
导出为默认值,因为它可能是索引的唯一导出。
Your component import will look like this:您的组件导入将如下所示:
import Component from './module';
or this, if you use a named export:或者,如果您使用命名导出:
import { NamedComponent } from './module';
Assuming you're using webpack to bundle your files, to make sure your imports can use './Component'
instead of './Component.jsx'
, include .jsx
as an extension in your resolve
property in webpack.config.js
:假设您使用 webpack 来打包文件,为了确保您的导入可以使用
'./Component'
而不是'./Component.jsx'
,请在webpack.config.js
的resolve
属性中包含.jsx
作为扩展名:
module.exports = {
resolve: {
extensions: ['.js', '.jsx'],
},
};
export Component from "./Component"
You should not use export default for your use case.您不应为您的用例使用导出默认值。 There is only a single default export per module.
每个模块只有一个默认导出。 This value is to be considered as the "main" exported value since it will be the simplest to import.
该值将被视为“主要”导出值,因为它是最容易导入的。 Refer https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export for more detail
有关更多详细信息,请参阅https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export
Inside index.js在 index.js 中
export { default as ComponentName } from './Component'; export { default as ComponentName } from './Component';
Then In App.js [Import it Like this]然后在 App.js [像这样导入]
import {ComponentName} from './module'从 './module' 导入 {ComponentName}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.