reactjs - 在 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'],
  },
};