Javascript ReactJs 可以将多个组件作为组导入吗？

Question

我正在做一个 reactjs 项目并创建许多组件，然后我将这些组件导入到其他组件中。

目前，如果我想导入 5 个组件，我需要这样做:

import C1 from './components/Component1';
import C2 from './components/Component2';
import C3 from './components/Component3';
import C4 from './components/Component4';
import C5 from './components/Component5';

因此，如果我有 50 个组件并且需要全部使用它们，则需要 50 行导入。

有没有创建组件组并导入它们或将大量组件导入页面的更好方法？

Answer 1

您可以创建一个文件来简单地重新导出所有组件，如下所示:

// components/index.js
import C1 from './components/Component1';
import C2 from './components/Component2';
import C3 from './components/Component3';
import C4 from './components/Component4';
import C5 from './components/Component5';

export {
  C1,
  C2,
  C3,
  C4,
  C5
};

在您的应用代码中:

import * as Components from './components';
Components.C1

要添加组件，您只需更改 index.js