1

我正在尝试使用动态导入来根据传递给组件的道具导入不同的模块。组件的路径保存在对象中

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 为这些动态模块提供服务？

4

1 回答 1

1

您需要使用dynamic实用程序 fromnext/dynamic在 Next.js 中进行动态导入。这个函数受到react-loadable库的启发，使用了类似的语法。

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

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

如果要导入不是 React 组件的模块，则需要使用自定义渲染功能：

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>
  },
});

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

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

于 2019-05-11T14:45:43.680 回答