以下是一个简单的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) 来管理组件的状态和副作用。