Question

我正在尝试使用动态导入来导入不同的模块，具体取决于传递给组件的道具。组件的路径保留在一个对象中

const components = {
    'apple': './Apple.js',
    'orange': './Orange.js',
    // ...
}

然后

// ...
import(components[this.props.type])
// ...

不幸的是，我收到以下错误：

Unhandled Rejection (Error): Cannot find module './Apple.js'

当我明确指定文件名（import('./Apple.js')）时，它消失了。是否可以强制nextjs服务这些动态模块？

Answer 1

您需要使用dynamic中的next/dynamic实用程序在Next.js中进行动态导入。此功能受react-loadable库的启发，并使用类似的语法。

在Next.js中动态导入React组件的最简单方法是：

const DynamicComponent1 = dynamic(import('../components/hello1'))

如果您要导入不是React组件的模块，则需要使用customizing rendering功能：

const DynamicDeliveryOptions = dynamic({
  loader: () => import('../components/delivery-options'),
  render(props, loaded) {
    const options = loaded.deliveryOptions.map(
      option => <option key={option.id}>{option.title}</option>
    );
    return <select>{options}</select>
  },
});

请注意，Next.js中render函数的签名与它在react-loadable库中的签名（props是Next.js中的第一个参数）。

回到您的示例：我认为导入多个模块的最佳方法是将它们全部声明为动态模块，并根据传递的props（在渲染之前不会加载模块）有条件地进行渲染。

如何强制Nextjs为特定模块创建块？

1 个答案: