Javascript 使用React图标库将鼠标悬停在图标上时显示文本

所以我试图在鼠标悬停时显示文本。 我正在使用React图标库和样式化组件

我的导航栏上有4个图标-主页-关于-技能-工作

每个按钮都是它自己的组件，以便悬停正常工作，因此当我将鼠标悬停在一个图标上时，它不会显示所有按钮的文本

import React, { useState } from 'react';
import { SkillsButton } from './SkillsBtnElements'

const SkillsBtn = () => {
  const [hover, setHover] = useState(false);
  const onHover = () => {
    setHover(!hover)
  }

  return (
    <div onMouseEnter={onHover} onMouseLeave={onHover} role="button" tabIndex='-3' >
      { hover ? "SKILLS" : <SkillsButton /> }
    </div>
  )
}

export default SkillsBtn;

我确实实现了悬停效果，但当我不断地悬停图标时，逻辑似乎变得混乱，然后只有文本出现，当我悬停在文本上时，图标出现……这不是期望的效果

---

示例：

异常效果是由于陈旧关闭问题造成的<代码>{hover？/SKILLS:}正在使用陈旧的hover值进行渲染。 如果希望文本仅在鼠标悬停在div上时显示，请尝试为onMouseEnter和onmouseeve事件创建两个单独的函数。像这样：

import React, { useState } from "react";
import { SkillsButton } from './SkillsBtnElements'

const SkillsBtn = () => {
  const [hover, setHover] = useState(false);
  const onHover = () => {
    setHover(true);
  };

  const onLeave = () => {
    setHover(false);
  };
  return (
    <div
      onMouseEnter={onHover}
      onMouseLeave={onLeave}
      role="button"
      tabIndex="-3"
    >
      {hover ? "SKILLS" : <SkillsButton />}
    </div>
  );
};

export default SkillsBtn;

import React，{useState}来自“React”；
从“/SkillsBtnElements”导入{SkillsButton}
const SkillsBtn=（）=>{
const[hover，setHover]=useState（false）；
常数onHover=（）=>{
setHover（真）；
};
const onLeave=（）=>{
setHover（假）；
};
返回(
{悬停？“技能”：
);
};
导出默认技能；

这就是进步！！然而，你会知道为什么有时候它会卡在“文本”上，当你不再在它上面悬停时，它不会回到图标上吗？发生这种情况是因为陈旧的关闭问题<代码>{hover？/SKILLS:}正在使用陈旧的hover值进行渲染。你可以。我希望有帮助。

import React, { useState } from "react";
import { SkillsButton } from './SkillsBtnElements'

const SkillsBtn = () => {
  const [hover, setHover] = useState(false);
  const onHover = () => {
    setHover(true);
  };

  const onLeave = () => {
    setHover(false);
  };
  return (
    <div
      onMouseEnter={onHover}
      onMouseLeave={onLeave}
      role="button"
      tabIndex="-3"
    >
      {hover ? "SKILLS" : <SkillsButton />}
    </div>
  );
};

export default SkillsBtn;