React Tooltip数据传递问题：如何将Map遍历生成的topLine与bottomLine内容展示到Tooltip中？

我明白你的需求啦——你想在hover每个日历事件时，显示对应事件的topLine和bottomLine内容到Tooltip里。目前你的代码里所有事件共用同一个Tooltip，但内容是固定的，所以需要调整成动态渲染对应事件的内容。这里有个简单高效的实现方案：

步骤说明 #

1. 添加状态跟踪当前hover的事件：用React的useState来保存当前鼠标悬停的事件对象，这样就能知道要渲染哪条数据的Tooltip内容。
2. 给每个事件容器添加鼠标事件：在eventContainer上绑定onMouseEnter和onMouseLeave，更新状态来切换当前激活的事件。
3. 动态渲染Tooltip内容：根据状态里的activeEvent，渲染对应的topLine和bottomLine内容。

修改后的完整代码 #

import { useState, Fragment } from 'react';
import Moment from 'moment';
import ReactTooltip from 'react-tooltip';

export const SmallCalendar = ({ events }) => { 
  // 新增状态：跟踪当前hover的事件
  const [activeEvent, setActiveEvent] = useState(null);

  const mapToRender = events?.map((e) => { 
    return ( 
      <div 
        key={e.id} // 记得给列表项加唯一key，这里假设事件有id属性
        className={styles.eventContainer} 
        data-for="registerTip"
        // 鼠标进入时设置当前事件
        onMouseEnter={() => setActiveEvent(e)}
        // 鼠标离开时清空状态
        onMouseLeave={() => setActiveEvent(null)}
      > 
        <div> 
          <div className={styles.eventContainerDate}> 
            <Moment format="MMM" className={styles.month}> 
              {e.start} 
            </Moment> 
            <Moment format="DD" className={styles.eventContainerLarge}> 
              {e.start} 
            </Moment> 
          </div> 
        </div> 
      </div> 
    ); 
  }); 

  return ( 
    <div> 
      {mapToRender} 
      <ReactTooltip id="registerTip" place="top" effect="solid">
        {/* 根据当前激活的事件动态渲染内容 */}
        {activeEvent && (
          <Fragment>
            <strong> {activeEvent.Title} - {activeEvent.start.slice(0, -9)} </strong>
            <br /> {/* 换行分隔两行内容 */}
            <strong>Applies to</strong>: {activeEvent.AppliesTo.join(", ")}
          </Fragment>
        )}
      </ReactTooltip> 
    </div> 
  ); 
};

关键修改点解释 #

• 状态管理：activeEvent状态用来存储当前鼠标悬停的事件对象，确保Tooltip能拿到正确的数据。
• 鼠标事件绑定：通过onMouseEnter和onMouseLeave更新状态，实现hover时切换Tooltip内容。
• 动态内容渲染：在Tooltip组件内部，只有当activeEvent存在时才渲染内容，避免初始状态下显示空内容；直接使用事件对象里的属性生成你需要的topLine和bottomLine，和你原来定义的逻辑一致。

另外要注意，给列表项添加唯一的key属性（比如事件的id），这是React列表渲染的最佳实践，避免不必要的重渲染和警告。

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