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

Question

我想从react-icons一个字符串数组定义的导入图标，该字符串数组对应于从react-icons. 我涵盖了每个图标库的案例react-icons。这是 FontAwesome 的一个案例。

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

上面的代码片段是在这里找到的一种动态导入命名导出的方法。

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

Answer 1

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

我从这篇文章中发现了这一点，并在意识到我正在通过模块访问元素库后决定使用数组访问表示法。