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

Question

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


export default function CheckIcon(props) {
  return (

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

CheckIcon.displayName = 'CheckIcon';

然后我将它们导入到一个我称之为 Icon.js 的组件中，我在其中为每个案例和 return 相应的组件进行切换。

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

Answer 2

您可以使用 Dynamic Imports 来做到这一点。

但真正的答案是您可能正在为您的代码使用捆绑器，而如何执行动态导入将取决于您使用的捆绑器。一些捆绑器有不同的语法。 Webpack will recognise import().

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

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

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

how to dynamically import components with react ? / Dynamic import

javascript

switch-statement

dynamic-import

reactjs

react-native