似乎无法在 React 的动态导入中使用 JavaScript 变量

Question

我正在使用 react-google-maps，但我认为我的问题适用于一般用户案例。 我想使用作为道具传入的 url 动态加载图标。但是我发现如果我使用一个变量，我会得到一个错误。请看下面：

当我需要和使用字符串的图标时，它可以正常工作，例如

icon={require('../assets/myPng.png')}

但是如果我的 png 路径是一个变量，例如

let url = '../assets/myPng.png'

icon={require(`${url)`}

我得到错误：

找不到模块'../assets/myPng.png'

谁能告诉我这是怎么回事？

如果我使用icon={require(url}，也会失败。

Answer 1

最好使用require(...)，这样路径将由你的包管理器管理。如果你直接使用一个字符串，它会绕过它，你会得到错误。我建议使用：

const icon = require('../assets/myPng.png')
// ...
<MapComponent icon={icon} ... />