React下拉菜单在Chrome响应式调试模式下缩放异常求助

问题分析 #

你遇到的核心问题是：Chrome DevTools响应式模式切换时，窗口宽度未正确同步到windowWidth状态，导致下拉菜单定位异常。正常窗口缩放时resize事件能正常触发，但响应式模式下Chrome的resize事件触发逻辑存在差异，再加上原代码中useEffect未设置依赖数组，导致事件重复绑定/解绑，进一步影响了事件触发的可靠性。

修复步骤 #

1. 修正useEffect的依赖数组 #

原代码中useEffect没有依赖数组，每次组件渲染都会重新绑定resize事件，既浪费性能也可能引发逻辑异常。将依赖数组设为空数组，确保只在组件挂载时绑定一次事件，同时初始化时手动触发一次宽度更新：

useEffect(() => {
  const handleWindowResize = () => {
    setWindowWidth(window.innerWidth);
  };

  window.addEventListener("resize", handleWindowResize);
  handleWindowResize(); // 初始化时强制获取一次正确宽度
  return () => {
    window.removeEventListener("resize", handleWindowResize);
  };
}, []); // 空依赖数组，仅组件挂载时执行

2. 优化下拉菜单定位逻辑（推荐方案） #

你当前通过windowWidth - 400计算left值的方式，完全依赖JS获取窗口宽度，容易出现同步问题。改用CSS原生定位属性，脱离JS计算，可靠性更高：

修改样式对象：

const showValue = {
  position: "absolute",
  right: "0", // 直接靠右对齐，无需计算窗口宽度
  top: "56px"
};

const hideValue = {
  position: "absolute",
  right: "0",
  top: "56px",
  visibility: "hidden",
  transitionProperty: "visibility",
  transitionDelay: "0.5s"
};

同时确保父元素（Nav.Link）设置相对定位，让下拉菜单基于它定位：

// 在返回的Nav.Link上添加相对定位样式
return (
  <Nav.Link 
    onMouseOver={() => setShown(true)} 
    onMouseLeave={() => setShown(false)}
    style={{ position: 'relative' }}
  >
    {/* 其余代码不变 */}
  </Nav.Link>
);

3. 适配Chrome DevTools的特殊处理（可选） #

如果仍存在响应式模式下的同步问题，可以结合媒体查询监听断点变化，补充resize事件的不足：

useEffect(() => {
  const mediaQuery = window.matchMedia('(max-width: 768px)');
  const handleMediaChange = () => {
    setWindowWidth(window.innerWidth);
  };
  mediaQuery.addEventListener('change', handleMediaChange);
  return () => mediaQuery.removeEventListener('change', handleMediaChange);
}, []);

完整修改后的代码示例 #

function Navigation() {
  const [isShown, setShown] = useState(false);
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleWindowResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener("resize", handleWindowResize);
    handleWindowResize();
    return () => {
      window.removeEventListener("resize", handleWindowResize);
    };
  }, []);

  const showValue = {
    position: "absolute",
    right: "0",
    top: "56px"
  };

  const hideValue = {
    position: "absolute",
    right: "0",
    top: "56px",
    visibility: "hidden",
    transitionProperty: "visibility",
    transitionDelay: "0.5s"
  };

  function signInDropDown(style) {
    return (
      <Container className={styles.user_drop_down} style={style}>
        <Row>
          <Col>
            <NavDropdown.Item>Sign in</NavDropdown.Item>
          </Col>
        </Row>
        <Row>
           <NavDropdown.Item>A button</NavDropdown.Item>
        </Row>
        <Row>
         <NavDropdown.Item>Another Button</NavDropdown.Item>
        </Row>
      </Container>
    );
  }

  return (
      <Nav.Link 
        onMouseOver={() => setShown(true)} 
        onMouseLeave={() => setShown(false)}
        style={{ position: 'relative' }}
      >
        <BiUser color="white" size="1.5rem" className={styles.cart_icon}></BiUser>
        {isShown ? signInDropDown(showValue) : signInDropDown(hideValue)}
      </Nav.Link>
  );
}

.user_drop_down {
    background-color:coral;
    max-width: 400px;
}

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