React中如何动态为SVG填充数据？匹配<g>元素id与数据id

你当前的实现能正常运行，但属于硬编码写法，无法动态适配数据源的变化（比如新增/删除数据项），而且靠数组索引（data[0]/data[1]）维护数据与SVG元素的对应关系，一旦数据顺序变动就会出错。要实现基于id的动态匹配，需要做以下修改：

1. 拆分/合并SVG元素配置 #

首先需要把每个<g>的位置、尺寸属性（x/width/height）和id绑定，有两种方式：

方式一：单独维护SVG配置数组 #

适合数据源和SVG布局需要分开管理的场景：

const data = [
  { id:'el-1', label:'name-1', category:'cat-1' },
  { id:'el-2', label:'name-2', category:'cat-2' }
];

// 存储每个<g>的布局配置
const svgLayouts = [
  { id: 'el-1', x: 0, width: 57, height: 62 },
  { id: 'el-2', x: 76, width: 82, height: 62 }
];

方式二：合并到数据源中 #

适合布局配置与数据一一对应的场景，更简洁：

const data = [
  { id:'el-1', label:'name-1', category:'cat-1', x:0, width:57, height:62 },
  { id:'el-2', label:'name-2', category:'cat-2', x:76, width:82, height:62 }
];

2. 用map+id匹配动态生成SVG元素 #

基于上面的配置，遍历数据源并通过id匹配布局属性，动态生成<g>元素：

修改后的完整代码（以方式一为例） #

const data = [
  { id:'el-1', label:'name-1', category:'cat-1' },
  { id:'el-2', label:'name-2', category:'cat-2' }
];

const svgLayouts = [
  { id: 'el-1', x: 0, width: 57, height: 62 },
  { id: 'el-2', x: 76, width: 82, height: 62 }
];

const App = (props) => {
  return ( 
    <svg
      width={247}
      height={160}
      viewBox="0 0 247 160"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      {data.map(dataItem => {
        // 通过id匹配对应的布局配置
        const layout = svgLayouts.find(item => item.id === dataItem.id);
        if (!layout) return null; // 无对应配置则跳过
        
        const { x, width, height } = layout;
        return (
          <g key={dataItem.id} id={dataItem.id}>
            <rect x={x} width={width} height={height} />
            <foreignObject x={x} width={width} height={height}>
              <div className="item">
                <div className="category">{dataItem.label}</div>
                <div className="label">{dataItem.category}</div>
              </div>
            </foreignObject>
          </g>
        );
      })}
    </svg>
  )
}

ReactDOM.render(<App/>, document.getElementById("root"))

3. 核心优势 #

• 动态适配：数据源新增/删除项时，只要布局配置中有对应id，就能自动生成/移除对应的SVG元素，无需手动修改SVG结构。
• 匹配可靠：通过id而非数组索引关联数据与元素，即使数据顺序变动，也能保证内容对应正确。
• 易于维护：布局配置集中管理，修改位置、尺寸时无需改动业务数据逻辑。

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