React中如何为SVG的path标签绑定点击事件？

问题根源 #

你代码里的两个关键错误导致点击事件无效：

1. 嵌套在StyledSouthAmerica里的<path />是完全多余的空元素，和SVG文件中实际的路径毫无关系，给它加onClick自然不会触发。
2. 直接给SVG组件绑定onClick会让整个SVG容器（包括空白区域）响应点击，不符合你只想让路径触发的需求。

解决方案1：使用Ref绑定路径点击事件（推荐，无需修改SVG文件） #

通过useRef获取SVG组件，再找到内部的path元素，手动绑定点击事件：

import React, { useState, useRef, useEffect } from "react";
import styled from "styled-components";
import { ReactComponent as SouthAmerica } from "./assets/South_America.svg";

const StyledSouthAmerica = styled(SouthAmerica)`
  path {
    fill: ${(props) => props.fillColor};
    stroke: ${(props) => props.stroke};
    cursor: pointer;
  }
`;

export default function Geomap() {
  const [isGeomapSelct, setIsGeomapSelct] = useState(false);
  const svgRef = useRef(null);

  const handlePathClick = () => {
    console.log("路径被点击了！");
    setIsGeomapSelct(true);
  };

  // 组件挂载后给path绑定事件，卸载时移除
  useEffect(() => {
    const pathElement = svgRef.current?.querySelector("path");
    if (pathElement) {
      pathElement.addEventListener("click", handlePathClick);
      return () => pathElement.removeEventListener("click", handlePathClick);
    }
  }, []);

  return (
    <StyledSouthAmerica
      ref={svgRef}
      fillColor={isGeomapSelct ? "#C9E9E1" : ""}
      stroke={isGeomapSelct ? "#61AD96" : ""}
    />
  );
}

解决方案2：直接嵌入SVG代码（直观可控） #

把SVG文件的内容复制到组件中，直接给内部的path元素添加onClick：

import React, { useState } from "react";
import styled from "styled-components";

const StyledSvg = styled.svg`
  path {
    fill: ${(props) => props.fillColor};
    stroke: ${(props) => props.stroke};
    cursor: pointer;
  }
`;

export default function Geomap() {
  const [isGeomapSelct, setIsGeomapSelct] = useState(false);

  const handlePathClick = () => {
    console.log("路径被点击了！");
    setIsGeomapSelct(true);
  };

  return (
    <StyledSvg
      fillColor={isGeomapSelct ? "#C9E9E1" : ""}
      stroke={isGeomapSelct ? "#61AD96" : ""}
      viewBox="0 0 你的SVG宽度 你的SVG高度" // 替换为原SVG的viewBox值
    >
      {/* 替换为原SVG中的path代码 */}
      <path d="原SVG的path路径数据" onClick={handlePathClick} />
    </StyledSvg>
  );
}

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