React Recharts中Tooltip仅首个柱生效 如何实现单柱独立悬浮提示

仅首个柱状条能触发Tooltip是Recharts柱状图场景的高频问题，按以下步骤排查修复即可：

• 检查数据与dataKey配置
  确认传入<BarChart>的数据集无重复唯一标识：如果是多序列柱状图，不要给多个<Bar>组件配置相同的dataKey；如果是单序列柱状图，检查每条数据的name/id等绑定到轴上的字段是否存在重复值——重复值会导致Recharts的事件委托仅匹配第一个渲染的元素。
• 调整Tooltip组件挂载位置
  不要把<Tooltip />嵌套在<Bar>组件标签内部，需将其和<XAxis />、<YAxis />、<Bar />保持同级，作为<BarChart>的直接子元素：

  错误写法

  <BarChart data={perfData}>
    <XAxis dataKey="moduleName" />
    <YAxis />
    <Bar dataKey="cost" fill="#2196f3" radius={[4,4,0,0]}>
      <Tooltip content={<CustomTooltip />} />
    </Bar>
  </BarChart>
  

  正确写法

  <BarChart data={perfData}>
    <XAxis dataKey="moduleName" />
    <YAxis />
    <Tooltip content={<CustomTooltip />} />
    <Bar dataKey="cost" fill="#2196f3" radius={[4,4,0,0]} />
  </BarChart>
  

• 修正CustomTooltip组件的渲染逻辑
  自定义Tooltip必须先校验悬浮激活状态、payload有效性再渲染内容，不要写死数据索引，基础可用结构参考（适配MUI makeStyles写法）：

  const useStyles = makeStyles(() => ({
    tooltipWrap: {
      background: '#fff',
      padding: '8px 12px',
      border: '1px solid #e0e0e0',
      borderRadius: 4,
      boxShadow: '0 2px 8px rgba(0,0,0,0.15)'
    },
    label: { margin: 0, fontWeight: 500, fontSize: 14 },
    value: { margin: '4px 0 0', fontSize: 13, color: '#666' }
  }))
  
  const CustomTooltip = ({ active, payload, label }) => {
    const classes = useStyles()
    // 非激活状态/无有效数据直接返回空
    if (!active || !payload?.length) return null
    const barData = payload[0].payload
    return (
      <div className={classes.tooltipWrap}>
        <p className={classes.label}>{label}</p>
        <p className={classes.value}>耗时：{barData.cost}ms</p>
      </div>
    )
  }
  

• 排查样式遮挡问题
  打开浏览器开发者工具，用元素选择器检查无法触发Tooltip的柱子区域是否被其他绝对定位的DOM元素遮挡，同时检查是否给图表容器、柱形元素加了pointer-events: none属性——该属性会导致元素无法响应鼠标悬浮事件，移除该属性或者调整遮挡元素的z-index即可。

修复后可先查看浏览器控制台是否有React抛出的duplicate key警告，若存在该警告直接修正数据源的重复唯一标识即可。

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