Javascript 如何在React中动态导入组件？

我正在尝试使用动态渲染优化我的一个组件，但我面临一些问题，因此这是我目前的情况：

我有一个

Alert

组件，它呈现一条警报消息以及一个图标

我有一个

图标

模块，它是一个图标库

我目前呈现的图标如下所示（这不是实际代码，只是给出了想法）：

import*作为“../icons”中的图标；
从“../icons”导入默认图标；
函数警报（iconName='defaultIcon'，消息）{
函数getIcon（iconName）{
如果（iconName==='defaultIcon'）{
返回DefaultIcon（）
}
返回图标[图标名]
}
返回(
{getIcon（iconName）}
{message}
)
}

因此，假设在大多数情况下调用

Alert

时没有

iconName

，那么组件根本不需要导入所有图标

默认情况下，我希望避免在

警报

组件中包含所有图标，但仅在指定了

图标名

时才这样做

---

甚至有可能这样做吗？

我认为这样做是不可能的

可能为导入图标库的图标创建一个组件。在警报组件中，您可以将图标组件作为子组件实现：

<Alert message="Alert!">
  <Icon iconName="defaultIcon" />
</Alert>

---

您应该使用类型或名称等动态导入图标，如下所示

import React from 'react';

export default function Icon({ type, ...props }) {
  const Icon = require(`./icons/${type}`).default;

  return <Icon {...props} />
}

import Icon from './Icon';

<Icon type="addIcon" />

从“React”导入React；
导出默认函数图标（{type，…props}）{
const Icon=require（`./icons/${type}`）。默认值；
返回
}
从“./Icon”导入图标；

好的，看起来我成功了，我就是这样做到的：

import DefaultIcon from '../icons';

function Alert(message, iconName="") {
  const [icon, useIcon] = useState();

  //componentDidMount
  const useEffect(() => {
    //if an icon name is specified, import the icons
    if (iconName) {
      import("./icons").then(icons => setIcon(icons[iconName]))
    } else {
      setIcon(DefaultIcon)
    }
  }
  ,[])
  
  return (
    <span>{icon}</span>
    <span>{message}</span>
  )
}

从“../icons”导入默认图标；
功能警报（消息，iconName=“”）{
const[icon，useIcon]=useState（）；
//组件安装
const useffect（（）=>{
//如果指定了图标名称，请导入图标
如果（iconName）{
导入（“./icons”）。然后（icons=>setIcon（icons[iconName]））
}否则{
设置图标（默认图标）
}
}
,[])
返回(
{icon}
{message}
)
}

import DefaultIcon from '../icons';

function Alert(message, iconName="") {
  const [icon, useIcon] = useState();

  //componentDidMount
  const useEffect(() => {
    //if an icon name is specified, import the icons
    if (iconName) {
      import("./icons").then(icons => setIcon(icons[iconName]))
    } else {
      setIcon(DefaultIcon)
    }
  }
  ,[])
  
  return (
    <span>{icon}</span>
    <span>{message}</span>
  )
}