是否有一种方法可以有条件地导入多个反应导入?

Question

我正在导入下面所有这些。好像有很多行。是否有一种方法可以有条件地/动态地导入这些?这里有7个不同的数据文件，但可能还有更多。

import React from "react";
import Mod1Data from "../data/Mod1Data";
import Mod2Data from "../data/Mod2Data";
import Mod3Data from "../data/Mod3Data";
import Mod4Data from "../data/Mod4Data";
import Mod5Data from "../data/Mod5Data";
import Mod6Data from "../data/Mod6Data";
import Mod7Data from "../data/Mod7Data";

我像这样设置传递它们，但仍然很长。

//lessons import
const lessons = {
Mod1Data,
Mod2Data,
Mod3Data,
Mod4Data,
Mod5Data,
Mod6Data,
Mod7Data,
};
//set lesson # to local storage
useEffect(() => {
localStorage.setItem("lesson", JSON.stringify(lesson));
}, [lesson]);
const properties = {
lesson: lesson,
data: lessons["Mod" + lesson + "Data"],
};
return (
<div>
<Component {...properties} />
</div>
);

Answer 1

在data文件夹中，您可以创建一个index.js文件，导出所有的数据文件。

一样:

export Mod1Data from "../data/Mod1Data";
export Mod2Data from "../data/Mod2Data";
export Mod3Data from "../data/Mod3Data";

然后当你导入时，你做:

import * from `pathtoindex`

这将在JS对象中包含所有数据。这样导入到不同的文件会更容易。