如何悬停任意兄弟React组件时同时触发所有组件的hover效果？

这个需求两种实现方式都可以，具体取决于你的组件结构和后续拓展需求：

方案1：仅通过SCSS实现（要求三个组件存在共同的直接父容器） #

如果三个同级兄弟节点外面包裹了同一个父元素，不需要写JS逻辑，仅用SCSS就能实现效果。

实现逻辑 #

利用父容器的hover状态，给所有子组件匹配和自身hover完全相同的样式即可。

代码示例 #

父组件渲染结构：

<div className="component-group">
  <Button />
  <Image />
  <Paragraph />
</div>

以按钮组件的SCSS为例，将原有:hover选择器调整为同时匹配两种触发场景：

// button.scss
.button {
  // 原有基础样式
  background: #eee;
  border: 1px solid #ccc;

  // 调整前仅匹配自身hover
  // &:hover {
  //   background: #1677ff;
  //   color: #fff;
  // }

  // 调整后同时匹配自身hover、父容器hover下的自身状态
  &:hover,
  :global(.component-group):hover & {
    background: #1677ff;
    color: #fff;
  }
}

图片、段落组件的SCSS做相同调整即可生效。

优缺点 #

• 优点：实现成本低，无额外JS运行开销
• 缺点：依赖固定DOM结构，若父容器内存在其他无关子元素， hover父容器时也会触发所有组件的hover效果；若后续组件不再是同级、没有共同父容器，方案会失效。

方案2：通过React JS实现（无DOM结构依赖，兼容性更强） #

如果组件没有公共父容器，或者后续可能调整组件嵌套层级，推荐用React状态管理实现。

实现逻辑 #

在公共父级维护一个共享的 hover 状态，任意组件触发鼠标进入/离开事件时修改这个状态，所有组件根据共享状态判断是否展示hover样式。

代码示例 #

公共父组件代码：

import { useState } from 'react';
import Button from './Button';
import Image from './Image';
import Paragraph from './Paragraph';

function ComponentGroup() {
  const [isGroupHover, setIsGroupHover] = useState(false);
  const sharedProps = {
    isGroupHover,
    onMouseEnter: () => setIsGroupHover(true),
    onMouseLeave: () => setIsGroupHover(false)
  };
  // 哪怕三个组件不在同一个父容器内，也能正常生效
  return (
    <>
      <div className="header">
        <Button {...sharedProps} />
      </div>
      <div className="content">
        <Image {...sharedProps} />
      </div>
      <div className="footer">
        <Paragraph {...sharedProps} />
      </div>
    </>
  );
}

按钮组件代码：

// Button.jsx
import './button.scss';

export default function Button({ isGroupHover, onMouseEnter, onMouseLeave }) {
  return (
    <button 
      className={`button ${isGroupHover ? 'button--active' : ''}`}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      测试按钮
    </button>
  );
}

按钮SCSS代码：

// button.scss
.button {
  background: #eee;
  border: 1px solid #ccc;

  // hover样式同时匹配原生hover和激活类
  &:hover,
  &--active {
    background: #1677ff;
    color: #fff;
  }
}

图片、段落组件按照相同逻辑调整即可。

优缺点 #

• 优点：不依赖DOM结构，组件任意摆放都能生效，后续迭代拓展性更强
• 缺点：需要编写少量JS逻辑，有极小的状态更新开销

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