react-minimal-pie-chart结合RcTooltip实现扇区悬停提示

尝试搭配rc-tooltip与react-minimal-pie-chart实现交互：鼠标悬停在饼图各扇区时弹出对应提示，外层直接包裹Tooltip的写法多次尝试都无法生效，初始实现代码如下：

<ToolTip {...toolToolInfo}>
<PieChart
    data={info}
    startAngle={270}
    lineWidth={50}
    paddingAngle={2}
    background={backgroundColor}
    onMouseOver={handleMouseOver}
    onMouseOut={handleMouseOut}
    segmentsStyle={getSegmentStyle}
  />
</ToolTip>

目标是实现和react-minimal-pie-chart官方tooltip示例完全一致的悬停交互，仅将示例中的提示组件替换为rc-tooltip。

直接用Tooltip包裹整个PieChart的写法，仅适用于Tooltip绑定单个根DOM元素的场景。react-minimal-pie-chart渲染的是多个独立SVG path组成的扇区，外层包裹的Tooltip无法识别单个扇区的悬停状态，也拿不到对应扇区的位置、数据，自然无法触发正确的提示效果。

放弃外层包裹的写法，改用受控模式手动控制rc-tooltip的显示、隐藏、位置和内容，具体步骤：

• 维护三个核心状态：当前悬停扇区的提示内容、tooltip显隐状态、tooltip定位坐标
• 绑定PieChart的onMouseOver事件，触发时获取当前悬停扇区的数据、锚点坐标（鼠标位置或扇区中心坐标均可），更新状态打开tooltip
• 绑定PieChart的onMouseOut事件，触发时重置状态关闭tooltip
• 将rc-tooltip设为受控模式，用一个透明占位元素作为锚点，通过状态动态更新其位置和提示内容，不需要直接包裹饼图组件

参考实现代码：

import { useState } from 'react';
import Tooltip from 'rc-tooltip';
import { PieChart } from 'react-minimal-pie-chart';
// 引入rc-tooltip基础样式，可根据项目需求替换自定义样式
import 'rc-tooltip/assets/bootstrap.css';

const ChartWithTooltip = () => {
  // Tooltip控制状态
  const [tooltipVisible, setTooltipVisible] = useState(false);
  const [tooltipContent, setTooltipContent] = useState('');
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleSegmentMouseEnter = (e, dataIndex) => {
    const currentData = info[dataIndex];
    // 可替换为getArcCenter计算出的扇区中心坐标，实现和官方示例完全一致的定位效果
    setPosition({
      x: e.clientX,
      y: e.clientY
    });
    setTooltipContent(`${currentData.label}: ${currentData.value}`);
    setTooltipVisible(true);
  };

  const handleSegmentMouseLeave = () => {
    setTooltipVisible(false);
  };

  return (
    <div style={{ position: 'relative' }}>
      <Tooltip
        visible={tooltipVisible}
        placement="top"
        overlay={tooltipContent}
        align={{
          offset: [position.x, position.y]
        }}
        destroyTooltipOnHide
      >
        {/* 透明占位元素作为Tooltip锚点 */}
        <span style={{ position: 'absolute', left: 0, top: 0, width: 0, height: 0 }} />
      </Tooltip>

      <PieChart
        data={info}
        startAngle={270}
        lineWidth={50}
        paddingAngle={2}
        background={backgroundColor}
        onMouseOver={handleSegmentMouseEnter}
        onMouseOut={handleSegmentMouseLeave}
        segmentsStyle={getSegmentStyle}
      />
    </div>
  );
};

• 如果需要和官方示例完全一致的定位效果，可以调用react-minimal-pie-chart导出的getArcCenter方法，传入饼图尺寸、扇区角度参数计算扇区中心坐标，替换鼠标坐标作为tooltip定位依据
• 若默认tooltip样式不符合需求，可通过overlayClassName传入自定义类名修改样式
• 外层容器必须设置position: relative，避免tooltip定位出现偏移

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