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

即可

Answer 2

您只能直接导出：

export {default as AcceptanceOptions} from './AcceptanceEnum';
export * from './AcceptanceEnum';

第一个导出默认值，第二个导出所有其余值。

要将它们导入您的组件中：

import { AcceptanceEnum, AcceptanceOptions} from "../../Enums/index";
import * as enums from "../../Enums/index"

在第一个中，您仅导入承兑汇票；在第二个中，您导入所有包含在index.js / ts文件中的导出内容

Javascript ReactJs可能将多个组件导入组中？

2 个答案: