ReactJS中如何将SVG字符串转为可嵌套的SVG元素？

你遇到的Objects are not valid as a React child错误，核心原因是React无法直接渲染原生DOM对象——你通过DOMParser生成的是浏览器原生的SVG DOM元素，而React仅支持渲染React元素、字符串、数字或合法的组件类型。

根据你的使用场景，推荐以下三种可行方案：

方案1：使用dangerouslySetInnerHTML（简单场景首选） #

这是最直接的方式，适合内容可信、结构简单的SVG字符串：

function App() {
  const svgString = '<svg height="210" width="400"><path d="M150 0 L75 200 L225 200 Z" /></svg>';
  
  return (
    <svg>
      {/* 将SVG字符串插入到g标签中，确保嵌套结构合法 */}
      <g dangerouslySetInnerHTML={{ __html: svgString }} />
    </svg>
  );
}

⚠️ 注意：该方法存在XSS风险，仅在SVG字符串来源完全可信时使用。

方案2：用@svgr/core转换为React组件（推荐生产环境） #

将SVG字符串转换为标准React组件，支持SVG优化、props传递等特性：

1. 先安装依赖：

npm install @svgr/core

2. 代码实现：

import { useState, useEffect } from 'react';
import svgr from '@svgr/core';

function App() {
  const svgString = '<svg height="210" width="400"><path d="M150 0 L75 200 L225 200 Z" /></svg>';
  const [SvgComponent, setSvgComponent] = useState(null);

  useEffect(() => {
    async function convertSvg() {
      // 将SVG字符串转换为React组件代码
      const componentCode = await svgr(svgString, {
        plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
      });
      // 动态生成组件（生产环境建议用更安全的动态导入方式）
      const Component = Function(`return ${componentCode}`)();
      setSvgComponent(<Component />);
    }
    convertSvg();
  }, [svgString]);

  return (
    <svg>
      {SvgComponent}
    </svg>
  );
}

优势：生成的React组件可复用、支持属性传递，还能通过SVGO自动优化SVG代码。

方案3：手动解析SVG为React元素（自定义场景） #

通过XML解析库将SVG字符串转为JSON结构，再递归生成React元素，完全可控：

1. 安装XML解析库：

npm install xml-js

2. 代码实现：

import { xml2js } from 'xml-js';

// 递归将SVG JSON结构转为React元素
function svgJsonToReact(json) {
  if (json.type !== 'element') return null;
  
  // 将连字符属性转为React兼容的驼峰式（如stroke-width → strokeWidth）
  const reactAttrs = Object.fromEntries(
    Object.entries(json.attributes || {}).map(([key, val]) => {
      const camelKey = key.replace(/-([a-z])/g, (match) => match[1].toUpperCase());
      return [camelKey, val];
    })
  );

  const children = json.elements?.map(svgJsonToReact) || [];
  return React.createElement(json.name, reactAttrs, ...children);
}

function App() {
  const svgString = '<svg height="210" width="400"><path d="M150 0 L75 200 L225 200 Z" /></svg>';
  const svgJson = xml2js(svgString, { compact: false });
  const svgElement = svgJson.elements?.[0] ? svgJsonToReact(svgJson.elements[0]) : null;

  return (
    <svg>
      {svgElement}
    </svg>
  );
}

优势：无需依赖危险的HTML插入，可自定义处理SVG的属性和元素，适合复杂定制场景。

• 快速实现、内容可信：选方案1
• 生产环境、需要组件特性：选方案2
• 自定义解析、无安全风险：选方案3

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