如何使用react动态导入组件？/ 动态导入

Question

我只使用 React 编程很短时间，我不知道是否有更有效的方法来执行此任务。我有一系列与某些 svg 文件相对应的文件。一个例子如下。

export default function CheckIcon(props) {
  return (

    <Icon {...props}>
        options={ CheckIcon }
        />
  );
}

CheckIcon.displayName = 'CheckIcon';

然后我将它们导入到一个名为 Icon.js 的组件中，在其中为每种情况进行切换并返回相应的组件。

import React from 'react';
import CloseIcon from './icons/CloseIcon';
import CheckIcon from './icons/CheckIcon';
import SumIcon from './icons/SumIcon';
import SubtractIcon from './icons/SubtractIcon';
import MultiplyIcon from './icons/MultiplyIcon';
import DivideIcon from './icons/DivideIcon';

export default function Icon({ type, ...props }) {
  const getIcon = () => {
    switch (type) {
      case 'close':
        return <CloseIcon {...props} />;
      case 'check':
        return <CheckIcon {...props} />;
      case 'sum':
        return <SumIcon {...props} />;
      case 'subtract':
        return <SubtractIcon {...props} />;
      case 'multiply':
        return <MultiplyIcon {...props} />;
      case 'divide':
        return <DivideIcon {...props} />;
      default:
        break;
    }
  };

  return getIcon();
}

最后，我将 Icon.js 文件导入到要显示 html 的组件中

  <div>

    {() => {
      return (
          <Icon type="close" />
          <Icon type="check" />
          <Icon type="sum" />
          <Icon type="subtract" />
          <Icon type="multiply" />
          <Icon type="divide" />
      );
    }}
  </div>

我的问题是，是否有一种更有效的方法可以将与每个段相对应的不同组件动态导入到我的 Icon.js 组件中？

感谢大家提前抽出时间并提供帮助。

Answer 1

我认为您也可以使用type图标名称require来动态加载图标，如下所示：

// Icon.js
import React from 'react';

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

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

// Then use it
import Icon from './Icon';

<Icon type="CloseIcon" />