如何动态导入React SVG组件并调用？解决导入失败问题

你之前的写法问题出在：动态import()返回的是一个模块对象，默认导出的组件其实在这个对象的.default属性里，直接用<MessageIcon />相当于渲染模块本身，自然不会生效。下面给两种可行的解决方式：

方式一：用React官方推荐的React.lazy + Suspense（最简洁） #

这是React专门为代码分割设计的方案，自动处理动态导入和加载状态：

import React, { lazy, Suspense } from 'react';

// 动态导入SVG组件，React.lazy会自动取default导出
const MessageIcon = lazy(() => import('../static/styles/svg/messageIcon'));

// 使用的时候用Suspense包裹，指定加载时的 fallback
function YourComponent() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <MessageIcon />
    </Suspense>
  );
}

方式二：手动处理Promise与组件状态 #

如果不想用Suspense，可以自己在组件里管理加载状态：

import React, { useState, useEffect } from 'react';

function YourComponent() {
  const [MessageIcon, setMessageIcon] = useState(null);

  useEffect(() => {
    // 动态导入后，取default属性得到组件
    import('../static/styles/svg/messageIcon')
      .then(module => setMessageIcon(module.default));
  }, []);

  // 加载完成前可以显示占位内容
  if (!MessageIcon) {
    return <div>加载中...</div>;
  }

  return <MessageIcon />;
}

补充说明 #

如果你的SVG是被webpack等构建工具处理成React组件的（比如用@svgr/webpack），上述两种方式都能正常工作。本质就是记住：动态导入的模块需要通过.default获取默认导出的内容。

内容的提问来源于stack exchange，提问作者Ebin Thomas