在React中处理多个导入的有效方法

时间:2019-05-13 14:43:02

标签: javascript reactjs refactoring

所以我正在React上开发一个站点,并试图组织BrowserRouter,所以对于每个组件(页面),我都会在App.js中创建这样的路径

<Route exact path="/" component={Homepage} />
<Route path="/about" component={About} />

,我想添加多个组件来创建多个这样的路由。问题是,是否存在一种有效的方法来处理从仅包含.js文件的ONE文件夹进行的多次导入。我有一个文件夹“ ./articles”,对于我要导出的每个文件,我现在都这样做

import MyComponent1 from "./articles/MyComponent1.js";

重复此行仅更改最后一个参数似乎不正确。导入有技巧可以使其更有效吗?

4 个答案:

答案 0 :(得分:0)

如果需要,可以在文章中创建index.js文件,唯一的工作就是收集各种组件并从一个位置导出它们。例如:

// /articles/index.js

export { default as MyComponent1 } from './MyComponent1.js';
export { default as MyComponent2 } from './MyComponent2.js';
export { default as MyComponent3 } from './MyComponent3.js';
export { default as MyComponent4 } from './MyComponent4.js';

// Used in another file:

import { MyComponent1, MyComponent2, MyComponent3, MyComponent4 } from './articles';

答案 1 :(得分:0)

您可以将index.js文件添加到/articles目录中,并让该index.js文件导入和导出文件夹中的所有类。然后,您可以从同一路径导入所有导出。

答案 2 :(得分:0)

您可以使用节点js(模拟import *)解决这种情况:

  • 您需要将fs.stat库的文件夹与组件一起阅读
  • 您需要获取数组中文件的列表
  • 然后使用所有这些组件动态创建router.js fs.writeFile文件
  • 放置文件后,您的webpack再次获取文件,然后重新构建 您的捆绑包中有很多进口商品

答案 3 :(得分:0)

如果文章仅在内容上有所不同,但是结构相同,我建议您仅创建一个通用的“ Article”组件,根据提供的道具显示不同的内容,并且可以将文章的信息存储在某些组件中JSON或后端在某个数组中并对其进行迭代。这样您就可以编写一次代码,而无需维护导入就可以填充文章数组。希望这会有所帮助!