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

【问题标题】：How to dynamically import a component in React?如何在 React 中动态导入组件？
【发布时间】：2021-05-26 13:12:58
【问题描述】：

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

我有一个 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 时才这样做

真的有可能吗？

【问题讨论】：

标签： javascript asynchronous lazy-loading dynamic-import

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我认为这是不可能的。

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

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

【讨论】：

【解决方案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>
  )
}

【讨论】：