ReactTooltip渲染异常：同一提示重复显示而非不同提示

问题现象 #

两个不同的经验条目（「Web3 and Biotechnology Analyst」和「Bachelor of Biotechnology」）本该显示各自对应的提示内容，但实际鼠标悬停时都显示了前者的提示文本。

问题原因 #

ReactTooltip 需要通过唯一标识绑定触发元素与提示框，当前代码仅给触发元素添加了data-tip属性，但未指定唯一关联标识，导致所有触发元素都匹配到最后一个渲染的 ReactTooltip 组件。

解决方法 #

给每个触发元素添加唯一的data-for属性，同时给对应的 ReactTooltip 组件设置相同值的id属性，实现触发元素与提示框的一一绑定。

修改后的代码示例 #

const Skills = () => (
  <>
    <h2 className="head-text">Skills & Experiences</h2>

    <div className="app__skills-container">

     ... (无关代码已省略)
      
      <div className="app__skills-exp">
        <div>
          <motion.div
            className="app__skills-exp-item"
          >
            <div className="app__skills-exp-year">
              <p className="bold-text">2021</p>
            </div>
            <motion.div className="app__skills-exp-works">

              <>
                <motion.div
                  whileInView={{ opacity: [0, 1] }}
                  transition={{ duration: 0.5 }}
                  className="app__skills-exp-work"
                  data-tip
                  data-for="tooltip-2021" {/* 添加唯一关联标识 */}
                >
                  <h4 className="bold-text">Web3 and Biotechnology Analyst</h4>
                  <p className="p-text">Revolution Technology</p>
                </motion.div>
                <ReactTooltip
                  id="tooltip-2021" {/* 对应触发元素的data-for值 */}
                  effect="solid"
                  arrowColor="#fff"
                  className="skills-tooltip"
                >
                  Revolution technology is a minor investing firm where I analysed small cap crypto currencies and clinical stage biotechnology companies
                </ReactTooltip>
              </>

            </motion.div>
          </motion.div>
        </div>
        <div>
          <motion.div
            className="app__skills-exp-item"
          >
            <div className="app__skills-exp-year">
              <p className="bold-text">2020</p>
            </div>
            <motion.div className="app__skills-exp-works">

              <>
                <motion.div
                  whileInView={{ opacity: [0, 1] }}
                  transition={{ duration: 0.5 }}
                  className="app__skills-exp-work"
                  data-tip
                  data-for="tooltip-2020" {/* 添加唯一关联标识 */}
                >
                  <h4 className="bold-text">Bachelor of Biotechnology</h4>
                  <p className="p-text">University of Queensland</p>
                </motion.div>
                <ReactTooltip
                  id="tooltip-2020" {/* 对应触发元素的data-for值 */}
                  effect="solid"
                  arrowColor="#fff"
                  className="skills-tooltip"
                >
                  After becoming one of the youngest people in Australia to complete high school I went on to pursue my passion for the sciences, however during downtime caused by shoulder surgery I decided to drop out and pursue my interest in web3
                </ReactTooltip>
              </>

            </motion.div>
          </motion.div>
        </div>
      </div>
    </div>
  </>
);

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