Reactjs React SVG子组件无法在MouseCenter上传递其React事件

当鼠标进入油炸圈饼图的一段时，我想显示它的标签，这是我试图实现的目标。 当它进入附近时，当前甚至无法使其成为console.log

我尝试过的是：用div包装线段，这只会使线段停止渲染

我似乎无法使用onMouseEnter甚至可以使用console.log（'hello'）

从“React”导入React；
从“/SegmentComponent”导入SegmentComponent；
从“/DonutGraphLabel”导入DonutGraphLabel；
从“/donutGraph.style”导入StyledNutGraph；
const DonutGraph=（{颜色、值、图标、初始偏移量}，…道具）=>{
设valueSum=0；
常量getOffset=函数（值）{
让这一点抵消；
如果（valueSum==0）{
thisOffset=初始偏移量；
}否则{
thisOffset=100-值总和+初始偏移量；
}
valueSum+=值；
返回此偏移量；
};
返回(
{values.map（（item，idx）=>{
返回；
})}
{values.map（（段，idx）=>{
const calculatedOffset=getOffset（段值）；
返回(
);
})}
);
};
导出默认DonutGraph；

要在SVG中放置div，div必须有一个foreignObject元素作为其父元素。我不太明白您的意思，您能给我举个例子吗？在我目前的方法中，这个svg被封装在一个React组件中。对不起，Robert，我已经更新了我的组件，我知道父对象是什么，我不知道foreignObject是什么，我只想知道我还需要做些什么才能使用这个事件。我已经试着按照docu所说的做了，但是，当我将片段包装在其中时，它们停止渲染，考虑到我只希望此div能够传递我的片段事件，我不认为这是我正在寻找的解决方案

import React from "react";
import SegmentComponent from "./SegmentComponent";
import DonutGraphLabel from "./DonutGraphLabel";
import StyledDonutGraph from "./donutGraph.style";

const DonutGraph = ({ colors, values, icons, initialOffset }, ...props) => {
  let valueSum = 0;

  const getOffset = function (value) {
    let thisOffset;
    if (valueSum === 0) {
      thisOffset = initialOffset;
    } else {
      thisOffset = 100 - valueSum + initialOffset;
    }
    valueSum += value;
    return thisOffset;
  };

  return (
    <StyledDonutGraph>
      {values.map((item, idx) => {
        return <DonutGraphLabel item={item} color={colors[idx]} />;
      })}
      <svg width="100%" height="100%" viewBox="0 0 42 42" className="donut">
        <circle
          className="donut-hole"
          cx="21"
          cy="21"
          r="15.91549430918954"
          fill="transparent"
        ></circle>
        <circle
          className="donut-ring"
          cx="21"
          cy="21"
          r="15.91549430918954"
          fill="transparent"
          stroke="#d2d3d4"
          strokeWidth="3"
        ></circle>
        {values.map((segment, idx) => {
          const calculatedOffset = getOffset(segment.value);
          return (
            <div onMouseEnter={console.log("hola Yulia")}>
              <SegmentComponent
                key={idx}
                onClick={console.log(segment.label)}
                color={colors[idx]}
                value={segment.value}
                offset={calculatedOffset}
              />
            </div>
          );
        })}
      </svg>
    </StyledDonutGraph>
  );
};

export default DonutGraph;