如何在反应中动态导入名称仅在运行时已知的模块（如包含名称的 api 响应）？

Question

我正在尝试构建一个包含图标和指向各种社交媒体句柄的链接的页脚，但是我希望我的页脚根据我的后端响应动态显示不同的图标和链接。我正在使用 Material UI，而 Material 图标是一个很大的库，因此我想根据得到的响应动态导入我需要的图标。

当然我可以 react.lazy import 所有重要的图标和将在后端响应后呈现的图标将自动导入。但是这个过程需要我提前硬编码一些图标的惰性导入。

有没有更好的方法来实现这一目标？

Answer 1

是的，有几种方法可以实现这一点，而无需提前硬编码惰性导入：

1. 使用动态导入：可以使用动态导入来导入图标 仅在需要时使用。例如，您可以创建一个函数 它采用图标的名称并返回解析的承诺 到导入的图标模块。这样您就可以仅在需要时导入图标，而不是提前导入。

   函数导入图标（名称）{ 返回导入（material-ui-icons/${name}）； }

   let iconName = 'Facebook' importIcon(iconName).then(icon => { 
                   // use the icon 
   });
   

2. 使用按需加载图标的库：有一些库（例如 react-fontawesome）允许您按需加载图标。使用这个库，你可以只导入你需要的图标，它会在需要时加载它们。

3. 创建一个图标的映射，这样你就可以提前导入所有的图标，但是你可以使用这个映射来根据后端响应来确定使用哪个图标。

   const iconMapping = {
     facebook: 'Facebook',
     twitter: 'Twitter',
     instagram: 'Instagram'
   }
   
   let iconName = 'facebook'
   const Icon = iconMapping[iconName];