如何在React组件中以编程方式向SVG图形添加SVG形状

问题原因 #

React为了防范XSS攻击，默认会将所有插入到JSX中的字符串做转义处理，你拼接的<circle>标签字符串不会被解析成真实的SVG DOM节点，只会作为纯文本展示，这就是当前写法不生效的根本原因。

推荐解决方案：生成JSX元素数组 #

不要拼接字符串，直接生成<circle>元素的数组插入到SVG中，这是符合React设计规范的写法，修改后的代码如下：

import './SVGLayer.css';
import React from 'react';

const SVGLayer = () => {
  // 生成JSX元素数组，而不是字符串
  const dots = Array.from({length: 20}).map((_, i) => (
    <circle 
      key={i} 
      cx={`${100 + i * 10}px`} 
      cy="100px" 
      r="0.5px" 
      stroke="black" 
    />
  ));

  return (
    <div className="svg-layer">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        width="800px"
        height="600px"
      >
        <circle cx="100px" cy="100px" r="1px" stroke="black" />
        {dots}
      </svg>
    </div>
  );
};

export default SVGLayer;

备选方案：使用dangerouslySetInnerHTML（不推荐） #

如果你确实需要直接插入SVG字符串，可以使用React提供的dangerouslySetInnerHTML属性，但是要注意该属性存在XSS安全风险，仅当你完全信任插入的字符串内容时使用：

// 仅示例，非推荐写法
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="800px"
  height="600px"
  dangerouslySetInnerHTML={{
    __html: `
      <circle cx="100px" cy="100px" r="1px" stroke="black" />
      ${dots}
    `
  }}
>
</svg>

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