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

问题描述

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

/......(\d+)/

然后我将它们导入到我称为 Icon.js 的组件中，在那里我为每个案例进行切换并返回相应的组件。

export default function CheckIcon(props) {
  return (

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

CheckIcon.displayName = 'CheckIcon';

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

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

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

感谢大家的时间和帮助。

解决方法

我认为您也可以使用 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" />

,

您可以使用 Dynamic Imports 执行此操作。

但真正的答案是您可能正在为您的代码使用捆绑器，而他的将取决于您使用的捆绑器。一些打包器有不同的语法。 Webpack will recognise import()。

但真正的答案是，如果您使用的是捆绑器，请不要尝试动态导入代码。这是一个早期的优化，会给你带来更多的问题。让捆绑器做它的事。 Webpack 执行 code splitting 和 tree shaking，随着您的代码库变大，让 Webpack 应用优化会更容易。

另请参阅 Webpack 文档的 Dynamic Imports 和 Lazy Loading 部分（如果您使用的是 Webpack）。