未定义模块，用于从外部程序包动态导入已命名的导出文件

Question

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

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

发现上述代码段here作为动态导入命名出口的方法。

我希望它返回与icon指定的图标相对应的组件，例如let icon = 'FaPhp';发生了一个错误，该错误表示：TypeError: Cannot read property 'FaPhp' of undefined

Answer 1

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

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