未定义从外部包动态导入命名导出的模块

Question

我想从 react-icons 中导入图标，这些图标由与从 react-icons 中图标组件的命名导出相对应的字符串数组定义。 我涵盖了 react-icons 中每个图标库的案例。这是 FontAwesome 案例的示例。

lazy(() => import('react-icons/fa').then(module => ({ default: module.Components[icon]})))

上面的代码片段被发现 here 作为一种动态导入命名导出的方法。

我希望这个 return 一个与 icon 指定的图标相对应的组件，例如 let icon = 'FaPhp'; 发生的事情是一个错误，它说： TypeError: Cannot read property 'FaPhp' of undefined

Answer 1

React 期望所有组件都以大写字母开头。因此，我将迭代器 icon 重命名为 Icon，然后我省略了 module.Components[icon] 并将其替换为 module[Icon] 这解决了我的问题！

我从 中了解到这一点，并在意识到我正在通过模块访问元素库后决定使用数组访问符号。