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

Question

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

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

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

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

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

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

我收到错误:

cannot find module '../assets/myPng.png'

谁能告诉我发生了什么事吗？

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

Answer 1

最好使用require(...)，这样路径将由您的包管理器管理。如果直接使用字符串，它将绕过它，并且您将收到错误。我建议使用:

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