React中多元素鼠标悬停关联显示的优化实现咨询

在React中实现：鼠标悬停在特定元素上时，对应的关联元素显示。目前为每个元素单独创建useState，6个元素要重复写代码，太冗余。尝试原生事件监听方案（如下方代码）导致页面崩溃，求简洁实现方式。

原代码1（单个元素的React实现） #

const Showstuff = () => {
  const [isHovering, setIsHovering] = useState(false);
  const handleMouseOver = () => {
    setIsHovering(true);
  };
  const handleMouseOut = () => {
    setIsHovering(false);
  };

    return(
        
        <div>
            <div onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
          Hover over div #1 here
        </div><br /><br />


            <div>
          Hover over div #2 here
        </div>


        {isHovering && (
          <div>
            <h2>Text here visible when hovering div 1</h2>
          </div>
        )}
        </div>
    )
  };
export default Showstuff;

原代码2（原生JS事件监听方案） #

const el = document.getElementById('container');
const hiddenDiv = document.getElementById('hidden-div');

el.addEventListener('mouseover', function handleMouseOver() {
  hiddenDiv.style.visibility = 'visible';
});

el.addEventListener('mouseout', function handleMouseOut() {
  hiddenDiv.style.visibility = 'hidden';
});

1. 单状态管理所有hover元素 #

用一个状态变量存储当前hover的元素标识（ID或自定义key），统一处理所有元素的hover逻辑，避免重复创建useState。

import { useState } from 'react';

const ShowStuff = () => {
  // 存储当前hover的元素标识，null表示无hover状态
  const [hoveredKey, setHoveredKey] = useState(null);

  // 复用hover处理函数，通过参数传递元素标识
  const handleHoverIn = (key) => setHoveredKey(key);
  const handleHoverOut = () => setHoveredKey(null);

  // 把元素和对应内容抽成数组，批量渲染减少重复代码
  const hoverItems = [
    { key: 'item1', triggerText: 'Hover over div #1 here', content: <h2>关联内容1</h2> },
    { key: 'item2', triggerText: 'Hover over div #2 here', content: <h2>关联内容2</h2> },
    { key: 'item3', triggerText: 'Hover over div #3 here', content: <h2>关联内容3</h2> },
    // 继续添加剩余3个元素...
  ];

  return (
    <div>
      {hoverItems.map(item => (
        <div key={item.key} className="hover-item">
          <div 
            onMouseOver={() => handleHoverIn(item.key)} 
            onMouseOut={handleHoverOut}
          >
            {item.triggerText}
          </div>
          <br />
          {/* 匹配到当前hover的元素才显示内容 */}
          {hoveredKey === item.key && <div>{item.content}</div>}
        </div>
      ))}
    </div>
  );
};

export default ShowStuff;

2. 封装可复用Hover组件 #

把hover触发、内容显示的逻辑封装成独立组件，使用时直接传入触发内容和关联内容即可，完全消除重复代码。

import { useState } from 'react';

// 通用Hover触发组件
const HoverTrigger = ({ triggerContent, showContent }) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div>
      <div 
        onMouseOver={() => setIsHovered(true)} 
        onMouseOut={() => setIsHovered(false)}
      >
        {triggerContent}
      </div>
      <br />
      {isHovered && <div>{showContent}</div>}
    </div>
  );
};

// 业务组件中使用
const ShowStuff = () => {
  return (
    <div>
      <HoverTrigger 
        triggerContent="Hover over div #1 here" 
        showContent={<h2>关联内容1</h2>} 
      />
      <HoverTrigger 
        triggerContent="Hover over div #2 here" 
        showContent={<h2>关联内容2</h2>} 
      />
      {/* 继续添加剩余4个组件实例 */}
    </div>
  );
};

export default ShowStuff;

3. 纯CSS实现（无需JS） #

如果触发元素和关联元素是父子/相邻兄弟关系，可以用CSS的:hover伪类直接实现，完全不用写JS逻辑，性能最优。

const ShowStuff = () => {
  return (
    <div className="hover-container">
      {/* 父子结构实现 */}
      <div className="parent-group">
        <div className="trigger">Hover over div #1 here</div>
        <div className="content">
          <h2>关联内容1</h2>
        </div>
      </div>

      <br /><br />

      {/* 相邻兄弟结构实现 */}
      <div className="sibling-trigger">Hover over div #2 here</div>
      <div className="sibling-content">
        <h2>关联内容2</h2>
      </div>
    </div>
  );
};

export default ShowStuff;

对应的CSS：

/* 父子结构hover显示 */
.parent-group .content {
  display: none;
}
.parent-group:hover .content {
  display: block;
}

/* 相邻兄弟结构hover显示 */
.sibling-content {
  display: none;
}
.sibling-trigger:hover + .sibling-content {
  display: block;
}

内容的提问来源于stack exchange，提问作者windsy