React.js中从SVG地图获取国家数据并更新状态的疑问

DevOps 小满

2026-6-13

解决方案

要获取SVG路径元素的属性并更新App的state，你可以通过React事件对象拿到被点击的DOM元素，再提取所需属性，具体步骤如下：

1. 在onClick回调中获取事件对象与目标元素

修改WorldMap的onClick回调，接收event参数，通过event.target获取被点击的<path>元素。如果路径内部有子元素，建议用closest('path')确保拿到正确的路径节点：

<WorldMap
  onClick={(event) => {
    // 调用侧边栏切换函数（注意要加括号执行）
    handleToggleSidebar();
    
    // 获取被点击的path元素
    const pathElement = event.target.closest('path');
    if (!pathElement) return; // 防止点击到非path元素
    
    // 提取path上的属性
    const countryData = {
      id: pathElement.getAttribute('id'),
      name: pathElement.getAttribute('name'),
      population: pathElement.getAttribute('population'),
      gdp: pathElement.getAttribute('gdp'),
    };
    
    // 更新App的state
    setData(countryData);
  }}
/>

2. （可选）使用标准自定义属性规范

HTML中自定义属性建议以data-前缀命名（比如data-population、data-gdp），这是W3C推荐的规范，也能通过dataset属性更便捷地获取值：

修改SVG的path属性：

<path 
  id="JP"
  name="Japan"
  data-population="123.4mil"
  data-gdp="$123.4mil"
  d="m 956.31178,153.05085 -0.29118,-0.19412...."
/>

对应修改属性提取逻辑：

const countryData = {
  id: pathElement.id, // id是原生属性，可直接读取
  name: pathElement.getAttribute('name'),
  population: pathElement.dataset.population,
  gdp: pathElement.dataset.gdp,
};