Question

我正在研究Node.js，并且正在前端服务器中利用Next.JS。

我有一个显示顶部菜单栏的组件，而这个组件是一个React.Component。

在index.js中，我想调用JSX中的组件：

<Top forPage="index">

此组件接收 forPage 属性，并依赖于该道具，我想在该 Top 组件上动态加载不同的内容。首先，在我的头上，在 Top.js 中，我认为可以通过这样的编码来实现：

const SubPageComponent = Dynamic(() => import("../component/Top_"+forPath+".js"));

并将其呈现在JSX中：

<SubPageComponent />

但这是一个问题，因为 forPath 来自 props 属性，所以我应该在类内部初始化动态组件。谷歌表示，在全球范围内，调用NextJS动态模块应该在类之外。

所以我被困于有条件地导入外部文件。

简单地说，我想编写如下代码：

constructor(props){
    //...
    switch(props.forPage){

        case "index":
            this.state.subPageComponent = importSomeComponent("../component/top_index");
        case "shop":
            this.state.subPageComponent = importSomeComponent("../component/top_shop");

    }

}

是否可以像这样实现？

NextJS，有条件导入外部文件

0 个答案: