在无状态组件中悬停时的文本更改

import React, { useState } from 'react';

const HoverText = (props) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleHover = () => {
    setIsHovered(!isHovered);
  };

  return (
    <div onMouseEnter={handleHover} onMouseLeave={handleHover}>
      {isHovered ? props.hoverText : props.defaultText}
    </div>
  );
};

import React, { useState } from 'react';

const HoverText = (props) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleHover = () => {
    setIsHovered(!isHovered);
  };

  return (
    <div onMouseEnter={handleHover} onMouseLeave={handleHover}>
      {isHovered ? props.hoverText : props.defaultText}
    </div>
  );
};

export default HoverText;

<HoverText defaultText="默认文本" hoverText="悬停时的文本" />