React中替换dangerouslySetInnerHTML渲染的SVG属性的更优方案

从Angular转React后，确实可以用更贴合React范式的方式处理这种SVG字符串的宽高设置，不用依赖正则替换或者直接全局DOM选择器，下面给你两种靠谱的实现方式：

方法一：使用Ref + useEffect操作DOM（安全可控） #

React中推荐通过useRef获取DOM节点，再结合useEffect在组件挂载后修改SVG属性，比直接用document.querySelector更符合React的数据流逻辑，避免意外操作到其他元素：

import { useRef, useEffect } from 'react';

const Icon = ({ svgContent, width, height }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      const svgElement = containerRef.current.querySelector('svg');
      if (svgElement) {
        if (width) svgElement.setAttribute('width', width);
        if (height) svgElement.setAttribute('height', height);
      }
    }
  }, [svgContent, width, height]); // 依赖变化时重新执行

  return (
    <div ref={containerRef} dangerouslySetInnerHTML={{ __html: svgContent }} />
  );
};

// 使用示例
<Icon svgContent={yourJson.content} width="32" height="32" />

方法二：解析SVG字符串为React元素（更推荐，无dangerouslySetInnerHTML） #

直接解析SVG字符串为DOM节点，再转换成React元素，这样就能像普通React组件一样直接传递宽高属性，彻底摆脱dangerouslySetInnerHTML的安全风险：

import { useEffect, useState } from 'react';

const parseSvgToReactElement = (svgString, width, height) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(svgString, 'image/svg+xml');
  const svgElement = doc.querySelector('svg');

  // 设置宽高属性
  if (width) svgElement.setAttribute('width', width);
  if (height) svgElement.setAttribute('height', height);

  // 递归将DOM节点转换为React元素
  const domToReact = (node) => {
    if (node.nodeType === Node.TEXT_NODE) {
      return node.textContent;
    }
    const attributes = {};
    Array.from(node.attributes).forEach(attr => {
      attributes[attr.name] = attr.value;
    });
    const children = Array.from(node.childNodes).map(domToReact);
    return React.createElement(node.tagName.toLowerCase(), attributes, ...children);
  };

  return domToReact(svgElement);
};

const Icon = ({ svgContent, width, height }) => {
  const [svgElement, setSvgElement] = useState(null);

  useEffect(() => {
    setSvgElement(parseSvgToReactElement(svgContent, width, height));
  }, [svgContent, width, height]);

  return svgElement;
};

// 使用示例
<Icon svgContent={yourJson.content} width="32" height="32" />

补充建议 #

如果项目允许，最好把SVG文件直接作为React组件导入（比如用@svgr/webpack这类工具），这样可以直接通过props控制宽高、颜色等属性，是最符合React开发习惯的方式：

// 导入SVG组件
import MyIcon from './my-icon.svg';

// 使用
<MyIcon width="32" height="32" fill="#ff0000" />

内容的提问来源于stack exchange，提问作者Get Off My Lawn