在 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}