React+TypeScript环境下如何渲染接口返回的外部SVG并实现内联展示

完全可以实现该需求，以下是两种适配React+TypeScript技术栈的落地方式：

方案1：原生实现（无第三方依赖） #

核心逻辑是主动请求API获取SVG原始文本，通过dangerouslySetInnerHTML插入到页面容器中，适合对依赖体积敏感的场景。

实现代码 #

import { useEffect, useState, FC, CSSProperties } from 'react';
// 如果需要过滤不可信SVG的XSS风险，可引入DOMPurify
// import DOMPurify from 'dompurify';

interface DynamicInlineSvgProps {
  src: string;
  className?: string;
  style?: CSSProperties;
  onLoad?: () => void;
  onError?: (err: Error) => void;
}

const DynamicInlineSvg: FC<DynamicInlineSvgProps> = ({
  src,
  className,
  style,
  onLoad,
  onError
}) => {
  const [svgContent, setSvgContent] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchSvg = async () => {
      try {
        setLoading(true);
        const res = await fetch(src);
        if (!res.ok) throw new Error(`SVG请求失败: ${res.statusText}`);
        const svgText = await res.text();
        // 若SVG来源不可信，取消下方注释进行XSS过滤
        // const safeSvg = DOMPurify.sanitize(svgText);
        // setSvgContent(safeSvg);
        setSvgContent(svgText);
        onLoad?.();
      } catch (err) {
        const e = err as Error;
        setError(e);
        onError?.(e);
      } finally {
        setLoading(false);
      }
    };
    fetchSvg();
  }, [src, onLoad, onError]);

  if (loading) return <div style={style}>加载中...</div>;
  if (error) return <div style={style}>SVG加载失败: {error.message}</div>;

  return (
    <div
      className={className}
      style={style}
      dangerouslySetInnerHTML={{ __html: svgContent }}
    />
  );
};

export default DynamicInlineSvg;

使用方式 #

<DynamicInlineSvg
  src="http://myservice/api/getplan(100)"
  style={{ width: "600px" }}
/>

注意事项 #

• 如果SVG来源为不可信的用户上传内容，必须引入DOMPurify对SVG文本做XSS过滤后再插入页面。
• 渲染出的SVG为标准内联DOM节点，支持CSS控制样式、JS绑定交互，和本地导入的SVG组件效果完全一致。

方案2：第三方库实现（开箱即用） #

推荐使用成熟的react-svg库，内置请求逻辑、缓存、错误处理、TS类型支持，不用手动封装即可实现需求。

安装依赖 #

npm install react-svg
# 或
yarn add react-svg

使用方式 #

import { ReactSVG } from 'react-svg';

// 直接在组件中使用
<ReactSVG
  src="http://myservice/api/getplan(100)"
  style={{ width: "600px" }}
  // 可选：插入SVG前对节点做自定义修改
  beforeInjection={(svg) => {
    svg.classList.add('custom-svg-class');
    // 也可以直接修改SVG属性、绑定事件等
  }}
  onLoad={() => console.log('SVG加载完成')}
  onError={(err) => console.error('SVG加载失败', err)}
/>

优势 #

• 内置请求缓存，重复请求同ID的SVG不会重复发起网络请求，非常适合你批量渲染数百个SVG的场景。
• 自动处理SVG命名空间、属性兼容等边界问题，比原生实现容错性更高。

通用注意事项 #

如果你的API服务和前端站点域名不同，需要后端配置CORS规则允许前端域名跨域访问SVG接口，否则会出现跨域请求报错。

内容的提问来源于stack exchange，提问作者Denis Molodtsov