Question

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

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

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

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

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

Answer 1

如果需要，可以在文章中创建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';

Answer 2

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

Answer 3

您可以使用节点js（模拟import *）解决这种情况：

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

Answer 4

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

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

4 个答案: