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

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中发现了这一点，在意识到我正在通过模块访问元素库后，决定使用数组访问表示法。