React中使用jQuery处理侧边栏transform与body resize失效问题排查

问题描述 #

使用React框架编写了如下MenuOpenClose函数，遇到以下问题：

• 当menuOpen为true时，能调整#body宽度但无法对#left-bar执行transform
• 当menuOpen为false时，两种样式操作均失效
• 控制台可正常获取#left-bar宽度值，但样式调整不生效

用户原代码：

var menuOpen = true;
function MenuOpenClose(){
  console.log($("#left-bar").width());
  if(menuOpen){
    $("#left-bar").css("transform", "translateX(" + $("#left-bar").width() * -1 + ")");
    $("#body").css("width", "100vw");
    console.log("menu was closed");
    menuOpen = false;
  }
  else{
    $("#left-bar").css("transform", "translateX(0px)");
    $("#body").css("width", "calc(100vw -" + $("#left-bar").width() + ")");
    console.log("menu was open");
    menuOpen = true;
  }
}

问题原因 #

1. React虚拟DOM与直接DOM操作冲突
   React是数据驱动视图的框架，组件渲染由内部状态决定。用jQuery直接修改DOM样式，会被React后续的重渲染操作覆盖，导致样式修改失效。

2. calc语法错误
   在设置#body宽度的代码中，calc(100vw -" + $("#left-bar").width() + ")的减号后没有空格，CSS的calc()要求运算符前后必须有空格，否则会被解析为无效语法，导致宽度设置不生效。

3. 全局状态管理不规范
   使用全局变量menuOpen管理菜单状态，不符合React的状态管理逻辑。组件重新渲染时，全局变量的状态可能与组件视图不同步，导致样式切换逻辑混乱。

解决方案 #

方案1：使用React状态+内联样式 #

改用React的useState管理菜单状态，通过useRef获取DOM元素，避免直接操作DOM：

import { useState, useRef } from 'react';

function YourComponent() {
  const [menuOpen, setMenuOpen] = useState(true);
  const leftBarRef = useRef(null);

  const getLeftBarWidth = () => {
    return leftBarRef.current ? leftBarRef.current.offsetWidth : 0;
  };

  const MenuOpenClose = () => {
    setMenuOpen(prev => !prev);
  };

  return (
    <div>
      <div
        id="left-bar"
        ref={leftBarRef}
        style={{
          transform: menuOpen ? 'translateX(0)' : `translateX(-${getLeftBarWidth()}px)`,
          transition: 'transform 0.3s ease' // 添加过渡动画提升体验
        }}
      >
        {/* 左侧菜单内容 */}
      </div>
      <div
        id="body"
        style={{
          width: menuOpen ? `calc(100vw - ${getLeftBarWidth()}px)` : '100vw',
          transition: 'width 0.3s ease'
        }}
      >
        {/* 主体内容 */}
        <button onClick={MenuOpenClose}>切换菜单</button>
      </div>
    </div>
  );
}

export default YourComponent;

方案2：使用CSS类+React状态（更推荐） #

将样式逻辑抽离到CSS中，通过切换类名控制样式，更符合React的组件化思想：

CSS代码

#left-bar {
  transition: transform 0.3s ease;
}
#left-bar.closed {
  transform: translateX(-100%); /* 无需计算宽度，直接左移自身宽度 */
}

#body {
  width: calc(100vw - var(--left-bar-width));
  transition: width 0.3s ease;
}
#body.full-width {
  width: 100vw;
}

React组件代码

import { useState, useRef, useEffect } from 'react';

function YourComponent() {
  const [menuOpen, setMenuOpen] = useState(true);
  const leftBarRef = useRef(null);

  // 初始化时设置左侧菜单宽度的CSS变量
  useEffect(() => {
    if (leftBarRef.current) {
      document.documentElement.style.setProperty('--left-bar-width', `${leftBarRef.current.offsetWidth}px`);
    }
  }, []);

  const MenuOpenClose = () => {
    setMenuOpen(prev => !prev);
  };

  return (
    <div>
      <div
        id="left-bar"
        ref={leftBarRef}
        className={menuOpen ? '' : 'closed'}
      >
        {/* 左侧菜单内容 */}
      </div>
      <div
        id="body"
        className={menuOpen ? '' : 'full-width'}
      >
        {/* 主体内容 */}
        <button onClick={MenuOpenClose}>切换菜单</button>
      </div>
    </div>
  );
}

export default YourComponent;

关键优化点 #

• 用React内置的状态管理替代全局变量，确保状态与视图同步
• 避免直接操作DOM，通过状态驱动样式变化
• 修正calc()的语法错误，保证运算符前后有空格
• 推荐用CSS类控制样式，实现样式与逻辑分离

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