在index.js文件中导出React 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