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

Question

我正在尝试使用动态渲染优化我的一个组件，但我遇到了一些问题，所以这是我目前的情况：

我有一个 Alert 组件，它会呈现一条警告消息以及一个图标。

我有一个 Icons 模块，它是一个图标库

我目前正在渲染图标如下（这不是实际代码，只是为了给出想法）：

import * as icons from '../icons';
import DefaultIcon from '../icons';

function Alert(iconName='defaultIcon', message) {  

  function getIcon(iconName) {
    if (iconName === 'defaultIcon') {
      return DefaultIcon()
    }
    return icons[iconName]
  }

  return (
    <div>
      <span>{getIcon(iconName)}</span>
      <span>{message}</span>
    </div>

  )
}

所以，假设 Alert 在大多数情况下被调用时没有 iconName，那么组件根本不需要导入所有图标。

我想避免在 Alert 组件中默认包含所有图标，但只有在指定 iconName 时才这样做

甚至可以这样做吗？

Answer 1

我认为这种方式不可能。

也许为导入图标库的图标创建一个组件。在 Alert 组件中，您可以将 Icon 组件作为子组件实现：

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

Answer 2

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

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" />

Answer 3

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

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>
  )
}

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

How to dynamically import a component in React?

javascript

asynchronous

lazy-loading

dynamic-import