鼠标悬停改变内容-react

用onMouseEnter、onMouseLeave

onMouseOver和onMouseOut属性，由于支持冒泡导致不稳定，后来更改为只经过自身触发、经过子元素不触发事件的onMouseEnter和onMouseLeave。

<div onMouseEnter={onChangeFocus(true)} onMouseLeave={onChangeFocus(false)}>
  {isFocus ? (
    // 悬停内容
  ) : (
    // 常规内容
  )}
</div>

import { clear } from 'echarts/lib/util/throttle';

// 定义
const [isFocus, setIsFocus] = useState(false);

// 防抖函数，作用同lodash工具包的debounce
const onChangeFocus = (flag) => {
 let timer = null;
   return () => {
     timer && clear(timer);
     timer = setTimeout(() => {
       setIsFocus(flag);
     }, 100);
   };
 };