在 index.js 文件中导出 react jsx-components

Question

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

以某种方式可以通过import module from "/module"; let C = module.Component;来访问import module from "/module"; let C = module.Component; 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' ，请在webpack.config.js的resolve属性中包含.jsx作为扩展名：

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}