导出对index.js文件中的jsx-components进行响应

Question

如何将jsx文件中定义的react-components捆绑在index.js文件中？

以某种方式可以通过import module from "/module"; let C = module.Component;访问组件。

使用：

/module
  index.js
  Component.jsx

Answer 1

要将组件重新导出为默认导出：

export { default } from './Component';

要将组件重新导出为命名导出：

export { default as NamedComponent } from './Component';

您应该首选从index.js导出默认值，因为它可能是索引中唯一的导出。

您的组件导入将如下所示：

import Component from './module';

或者，如果您使用命名导出：

import { NamedComponent } from './module';

假设您使用webpack捆绑文件，以确保导入可以使用'./Component'而不是'./Component.jsx'，请在.jsx中添加resolve作为扩展名webpack.config.js中的财产：

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

Answer 2

export Component from "./Component"

您不应该为您的用例使用导出默认值。每个模块只有一个默认导出。此值将被视为“主要”导出值，因为它将是最简单的导入值。有关详细信息，请参阅https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export

Answer 3

在 index.js 中

export { default as ComponentName } from './Component';

然后在 App.js [像这样导入]

从'./module'导入{ComponentName}