React中CSS/JS/HTML共享元素引用问题：hover背景切换失效

在React项目中实现hover菜单项时移动背景图的效果：页面有4个菜单项，hover其中一项时，通过给包含菜单项的div设置data-active-index（值为0-3），触发对应的CSS背景位置变化。目前控制台显示data-active-index已正确设置，但CSS背景位置样式未生效，不过opacity和background-size的过渡效果正常。CSS与JS同目录，HTML在另一目录。

相关代码片段 #

HTML结构示例

<div id="menu" data-active-index="3"></div>

CSS规则示例

.menu[data-active-index="0"] > .menu-background-pattern {
  background-position: 0% -25%;
}

React组件代码

import React from "react";

export default function App() {
    const menu = document.getElementById("menu");

    Array.from(document.getElementsByClassName("menu-item"))
        .forEach((item, index) => {
            item.onmouseover = () => {
                menu.dataset.activeIndex = index;
                console.log(menu)
            }
        })

    return (
        <div className="menu">
            <div className="menu-items">
                <a href="/" className="menu-item">stuff</a>
                <a href="/" className="menu-item">stuff</a>
                <a href="/" className="menu-item">stuff</a>
                <a href="/" className="menu-item">stuff</a>
            </div>
            <div className="menu-background-pattern"></div>
        </div>
    )
}

index.css代码

.menu-background-pattern {
  height: 100vh;
  width: 100vw;

  background-image: radial-gradient(
    rgba(255,255,255,0.1) 9%,
    transparent 9%
    );
    background-position: 0% 0%;
    background-size: 12vmin 12vmin;

    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;

    transition: opacity 800ms ease,
      background-size 800ms ease;
}

问题排查与修复 #

1. DOM操作时机错误（React核心问题）

原代码在组件函数执行时直接调用document.getElementById("menu")，此时组件还未完成渲染，DOM元素尚未挂载，menu变量会是null，后续设置dataset.activeIndex根本不会生效。

2. JSX元素缺少匹配的ID

React组件返回的menu div只有className="menu"，没有添加id="menu"，即使DOM挂载后，getElementById也无法找到目标元素。

3. CSS过渡未包含background-position

当前transition属性里没有background-position，即使样式生效，也不会有过渡动画效果。

修正后的代码 #

React组件（改用useRef+useEffect符合React规范）

import React, { useEffect, useRef } from "react";

export default function App() {
  const menuRef = useRef(null);

  useEffect(() => {
    const menuItems = document.getElementsByClassName("menu-item");
    const handleMouseOver = (index) => {
      if (menuRef.current) {
        menuRef.current.dataset.activeIndex = index;
      }
    };

    Array.from(menuItems).forEach((item, index) => {
      item.addEventListener("mouseover", () => handleMouseOver(index));
    });

    // 清理事件监听，避免内存泄漏
    return () => {
      Array.from(menuItems).forEach((item, index) => {
        item.removeEventListener("mouseover", () => handleMouseOver(index));
      });
    };
  }, []);

  return (
    <div className="menu" ref={menuRef}>
      <div className="menu-items">
        <a href="/" className="menu-item">stuff</a>
        <a href="/" className="menu-item">stuff</a>
        <a href="/" className="menu-item">stuff</a>
        <a href="/" className="menu-item">stuff</a>
      </div>
      <div className="menu-background-pattern"></div>
    </div>
  );
}

修正后的CSS

.menu-background-pattern {
  height: 100vh;
  width: 100vw;

  background-image: radial-gradient(
    rgba(255,255,255,0.1) 9%,
    transparent 9%
  );
  background-position: 0% 0%;
  background-size: 12vmin 12vmin;

  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 1;

  /* 添加background-position到过渡属性 */
  transition: opacity 800ms ease,
    background-size 800ms ease,
    background-position 800ms ease;
}

/* 补充所有索引对应的背景位置规则 */
.menu[data-active-index="0"] > .menu-background-pattern {
  background-position: 0% -25%;
}

.menu[data-active-index="1"] > .menu-background-pattern {
  background-position: 25% -25%;
}

.menu[data-active-index="2"] > .menu-background-pattern {
  background-position: 50% -25%;
}

.menu[data-active-index="3"] > .menu-background-pattern {
  background-position: 75% -25%;
}

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