利用React实现多个场景下的鼠标跟随框提示框

以下是一个简单的React组件实例，用于在鼠标悬停在元素上时显示一个跟随鼠标的提示框（Tooltip）：

import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
 
const Tooltip = ({ text }) => {
  const [showTooltip, setShowTooltip] = useState(false);
  const tooltipRef = useRef(null);
 
  const handleMouseEnter = () => {
    setShowTooltip(true);
  };
 
  const handleMouseLeave = () => {
    setShowTooltip(false);
  };
 
  const setTooltipPosition = () => {
    if (tooltipRef.current) {
      const rect = tooltipRef.current.getBoundingClientRect();
      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const tooltipHeight = tooltipRef.current.offsetHeight;
      const tooltipWidth = tooltipRef.current.offsetWidth;
      const top = rect.top + scrollTop + (rect.height / 2) - (tooltipHeight / 2);
      const left = rect.left + scrollLeft + (rect.width / 2) - (tooltipWidth / 2);
      tooltipRef.current.style.top = `${top}px`;
      tooltipRef.current.style.left = `${left}px`;
    }
  };
 
  useEffect(() => {
    if (showTooltip) {
      setTooltipPosition();
      window.addEventListener('resize', setTooltipPosition);
      return () => window.removeEventListener('resize', setTooltipPosition);
    }
  }, [showTooltip]);
 
  return (
    <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
      {showTooltip && (
        <div ref={tooltipRef} style={{ position: 'absolute', backgroundColor: 'black', color: 'white', padding: '5px', borderRadius: '5px' }}>
          {text}
        </div>
      )}
    </div>
  );
};
 
Tooltip.propTypes = {
  text: PropTypes.string.isRequired,
};
 
export default Tooltip;

使用方法：

<Tooltip text="这是一个提示信息" />

这个组件在鼠标悬停时显示一个包含传递文本的提示框，悬停时更新其位置以保持其位于鼠标下方且居中。提示框在鼠标离开时隐藏。使用React Hooks (useState, useRef, useEffect) 来管理组件的状态和副作用。