当对象悬停在React中时替换框中的文本

import React, { useState } from 'react';

const HoverText = () => {
  const [hoveredText, setHoveredText] = useState('');

  const handleMouseEnter = (text) => {
    setHoveredText(text);
  };

  return (
    <div>
      <div onMouseEnter={() => handleMouseEnter('替换文本1')}>
        悬停对象1
      </div>
      <div onMouseEnter={() => handleMouseEnter('替换文本2')}>
        悬停对象2
      </div>
      <div onMouseEnter={() => handleMouseEnter('替换文本3')}>
        悬停对象3
      </div>
      <div>
        框中的文本：{hoveredText}
      </div>
    </div>
  );
};

export default HoverText;