React跨组件使用useRef实现侧边栏切换的技术问询

方案一：状态提升（React推荐方式） #

把侧边栏的显示状态放到父布局组件中，通过props把切换函数传给Header，把状态传给Sidebar，完全基于React数据流实现，避免直接操作DOM。

父布局组件（Layout.jsx） #

import { useState } from 'react';
import Header from './Header';
import Sidebar from './Sidebar';

const Layout = ({ children }) => {
  // 维护侧边栏的显示状态
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);

  // 切换侧边栏的函数
  const toggleSidebar = () => {
    setIsSidebarOpen(prev => !prev);
  };

  return (
    <div className="flex">
      {/* 把切换函数传给Header */}
      <Header onToggleSidebar={toggleSidebar} />
      {/* 把显示状态传给Sidebar */}
      <Sidebar isOpen={isSidebarOpen} />
      <main>{children}</main>
    </div>
  );
};

export default Layout;

Header组件（Header.jsx） #

const Header = ({ onToggleSidebar }) => {
  return (
    <header>
      {/* 点击汉堡按钮触发切换函数 */}
      <button onClick={onToggleSidebar}>汉堡按钮</button>
      {/* 其他Header内容 */}
    </header>
  );
};

export default Header;

Sidebar组件（Sidebar.jsx） #

const Sidebar = ({ isOpen }) => {
  // 根据状态动态添加类名
  return (
    <aside className={`transition-transform duration-300 ${isOpen ? '' : '-translate-x-full'}`}>
      {/* Sidebar内容 */}
    </aside>
  );
};

export default Sidebar;

方案二：使用Ref直接操作DOM #

如果你更倾向于原来的DOM操作方式，需要用forwardRef把父组件的ref传递给Sidebar的DOM元素，同时把切换函数传给Header。

父布局组件（Layout.jsx） #

import { useRef } from 'react';
import Header from './Header';
import Sidebar from './Sidebar';

const Layout = ({ children }) => {
  const sidebarRef = useRef(null);

  const toggleSidebar = () => {
    if (sidebarRef.current) {
      sidebarRef.current.classList.toggle('-translate-x-full');
    }
  };

  return (
    <div className="flex">
      <Header onToggleSidebar={toggleSidebar} />
      {/* 把ref传给Sidebar */}
      <Sidebar ref={sidebarRef} />
      <main>{children}</main>
    </div>
  );
};

export default Layout;

Sidebar组件（Sidebar.jsx） #

import { forwardRef } from 'react';

// 用forwardRef转发ref到内部的aside元素
const Sidebar = forwardRef((props, ref) => {
  return (
    <aside ref={ref} className="transition-transform duration-300">
      {/* Sidebar内容 */}
    </aside>
  );
});

export default Sidebar;

Header组件 #

和方案一的Header组件完全一致，接收onToggleSidebar并绑定到按钮点击事件即可。

两种方案对比 #

• 方案一遵循React单向数据流，状态集中管理，便于调试和维护，是推荐的实现方式。
• 方案二直接操作DOM，适合需要直接访问DOM元素的场景，但状态依赖DOM，不如方案一清晰。

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