在 index.js 个文件中导出 React jsx 组件

Question

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

以import module from "/module"; let C = module.Component;.

可以访问组件的方式

与：

/module
  index.js
  Component.jsx

Answer 1

export Component from "./Component"

您不应为您的用例使用导出默认值。每个模块只有一个默认导出。该值将被视为 "main" 导出值，因为它最易于导入。参考 https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export 了解更多详情

Answer 2

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

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 作为扩展名包含在 [=19] 中=] 属性在 webpack.config.js:

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

Answer 3

里面index.js

从“./Component”导出 { 默认为 ComponentName}；

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

从“./module”导入 {ComponentName}

Export react jsx-components in index.js files