我正在导入下面所有这些。好像有很多行。是否有一种方法可以有条件地/动态地导入这些?这里有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>
);
在data文件夹中,您可以创建一个index.js文件,导出所有的数据文件。
一样:
export Mod1Data from "../data/Mod1Data";
export Mod2Data from "../data/Mod2Data";
export Mod3Data from "../data/Mod3Data";
然后当你导入时,你做:
import * from `pathtoindex`
这将在JS对象中包含所有数据。这样导入到不同的文件会更容易。