如何在React/JavaScript中获取点击SVG路径的data-workSpaceId

你当前用<img>标签引入SVG的方式无法获取内部path的属性，因为<img>加载的SVG会被浏览器当作独立位图资源，无法访问其内部DOM结构，点击事件只会触发在<img>元素本身，自然拿不到path的data-workSpaceId。

以下是几种可行的解决方案：

方案1：将SVG作为React组件直接引入（推荐） #

在Create React App等支持SVG组件导入的环境中，可以直接把SVG当作组件导入，直接操作内部path元素：

// 导入SVG组件
import WorkspaceSVG from './your-svg-file.svg';

function WorkspaceComponent() {
  const handlePathClick = (e) => {
    // 获取data-workSpaceId属性
    const workSpaceId = e.target.getAttribute('data-workSpaceId');
    // 也可以用dataset（注意驼峰映射规则）
    // const workSpaceId = e.target.dataset.workSpaceId;
    console.log(workSpaceId);
  };

  return (
    <WorkspaceSVG>
      {({ children }) =>
        React.Children.map(children, (child) => {
          if (child.type === 'path') {
            return React.cloneElement(child, { onClick: handlePathClick });
          }
          return child;
        })
      }
    </WorkspaceSVG>
  );
}

如果SVG是静态内容，也可以直接把SVG代码写在React组件里，直接给path绑定点击事件：

function WorkspaceComponent() {
  const handlePathClick = (e) => {
    console.log(e.target.getAttribute('data-workSpaceId'));
  };

  return (
    <svg width="208" height="94" viewBox="0 0 208 94" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path data-workSpaceId="1" d="M0" fill="#BFBEBE" onClick={handlePathClick}/>
      <path data-workSpaceId="2" d="M15.75" fill="white" onClick={handlePathClick}/>
      <path data-workSpaceId="3" d="M14." fill="#20968F" onClick={handlePathClick}/>
    </svg>
  );
}

方案2：使用dangerouslySetInnerHTML插入SVG并通过事件委托获取属性 #

如果需要动态加载SVG字符串，可通过dangerouslySetInnerHTML插入，再给父容器绑定事件委托：

function WorkspaceComponent() {
  const svgString = `
    <svg width="208" height="94" viewBox="0 0 208 94" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path data-workSpaceId="1" d="M0" fill="#BFBEBE"/>
      <path data-workSpaceId="2" d="M15.75" fill="white"/>
      <path data-workSpaceId="3" d="M14." fill="#20968F"/>
    </svg>
  `;

  const handleContainerClick = (e) => {
    // 确保点击目标是path元素
    if (e.target.tagName === 'PATH') {
      const workSpaceId = e.target.getAttribute('data-workSpaceId');
      console.log(workSpaceId);
    }
  };

  return (
    <div onClick={handleContainerClick} dangerouslySetInnerHTML={{ __html: svgString }} />
  );
}

方案3：使用useRef访问SVG DOM元素 #

通过ref获取SVG元素，在组件挂载后给所有path绑定点击事件：

import { useRef, useEffect } from 'react';

function WorkspaceComponent() {
  const svgRef = useRef(null);

  useEffect(() => {
    const svgElement = svgRef.current;
    if (!svgElement) return;

    // 获取所有path元素并绑定点击事件
    const paths = svgElement.querySelectorAll('path');
    const clickHandler = (e) => {
      const workSpaceId = e.target.getAttribute('data-workSpaceId');
      console.log(workSpaceId);
    };

    paths.forEach(path => path.addEventListener('click', clickHandler));

    // 组件卸载时清理事件监听
    return () => {
      paths.forEach(path => path.removeEventListener('click', clickHandler));
    };
  }, []);

  return (
    <svg ref={svgRef} width="208" height="94" viewBox="0 0 208 94" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path data-workSpaceId="1" d="M0" fill="#BFBEBE"/>
      <path data-workSpaceId="2" d="M15.75" fill="white"/>
      <path data-workSpaceId="3" d="M14." fill="#20968F"/>
    </svg>
  );
}

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