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

debugcn 发表于 Dev

javascript110899

我只是用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组件中？

感谢大家的时间和事先的帮助。

tmhao2005

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。