我可以在 next.js 中使用带有 for 循环的动态导入吗？

Question

当我需要引入很多组件时，我将使用动态导入。 在这种情况下，是否可以使用“for”循环？

 import dynamic from "next/dynamic"; let Dynamic = []; for (let i = 1; i < 80; i++) { const DynamicComponent = dynamic(() => import(`../src/Templates/BlendyTemplate${i}`) ); Dynamic.push(DynamicComponent); } //this is just example.. const Home = () =>{ const [state,setState] = useState(0); let DynamicComponents = Dynamic[state] return <div> <button onClick={()=>{setState(state+1)}} <DynamicComponents/></div> } export default Home;

Answer 1

不，您不能动态生成路径：

注意：在import('path/to/component')中，必须显式写入路径。 它不能是模板字符串或变量。 此外，import() 必须位于 Next.js 的 dynamic() 调用中，以便能够将 webpack 包/模块 ID 匹配到特定的 dynamic() 调用并在渲染之前预加载它们。 dynamic() 不能在 React 渲染内部使用，因为它需要在模块的顶层标记才能预加载工作，类似于 React.lazy。

来源