点击Layout.js按钮后无法更新SideBar.js状态的解决方案求助

点击Layout.js中的按钮无法切换SideBar.js的可见状态，尝试使用useImperativeHandle但未生效，希望实现类似YouTube的侧边栏切换效果。

相关代码 #

Layout.js - 包含触发侧边栏切换的按钮 #

'use client'

import { useRef } from 'react';
import './globals.css'
import Menu from '@mui/icons-material/Menu';


export const metadata = {
  title: 'Audio X',
  description: 'Your favourite music player',
}

const menuIconStyles = {
  fontSize: 30, 
  cursor: 'pointer', 
  marginLeft: 3,
  marginRight: 3
}

export default function RootLayout({ menuBtnRef, children }) {
  return (
    <html lang="en">
      <body>

        <header className='w-full flex h-16 dark-background-1'>
          <div className='absolute w-60 h-16 top-0 left-0 flex items-center'>
            <Menu htmlColor="white" sx={menuIconStyles} onClick={() => {menuBtnRef?.current.handleMenuClick()}}/>
            <h1 className='text-white text-3xl font-bold'>Audio X</h1>
          </div>
        </header>

        {children}
      </body>
    </html>
  )
}

SideBar.js - 侧边栏组件，包含可见性状态控制 #

'use client'

import { useState, forwardRef, useImperativeHandle } from 'react';
import Menu from '@mui/icons-material/Menu';

const menuIconStyles = {
  fontSize: 30, 
  cursor: 'pointer', 
  marginLeft: 3,
  marginRight: 3
}

const SideBar = (props, ref) => {
  const [sideBarVisibility, setSideBarVisibility] = useState(false);

  const f = {
    left: sideBarVisibility ? 0 : -240
  }

  function handleMenuClick() {
    console.log("hello");
    setSideBarVisibility((prevState) => {
      return !prevState
    });
  }

  useImperativeHandle(ref, () => ({
    handleMenuClick: handleMenuClick
  }), [handleMenuClick]);

  return (
    <nav className="h-screen w-60 dark-background-1 z-100 fixed top-0 duration-300" style={f}>
      <div className='absolute w-60 h-16 top-0 left-0 flex items-center'>
        <Menu htmlColor="white" sx={menuIconStyles} onClick={handleMenuClick} />
        <h1 className='text-white text-3xl font-bold'>Audio X</h1>
      </div>
    </nav >
  );
}

export default forwardRef(SideBar);

page.js - 主内容组件，包含SideBar #

'use client'

import Image from 'next/image';
import SideBar from '@/components/SideBar';
import { useRef } from 'react';

export default function Home() {
  const menuBtnRef = useRef(null);
  return (
    <main className="flex">
      <SideBar ref={menuBtnRef}/>
    </main>
  )
}

原方案失效的核心原因：RootLayout并未接收到page.js中创建的menuBtnRef。在Next.js App Router中，RootLayout作为父组件，page.js的内容以children形式传入，但menuBtnRef仅传递给了SideBar，并未传递给RootLayout，导致点击按钮时menuBtnRef为undefined，无法触发侧边栏状态切换。

推荐使用React Context实现状态共享，替代命令式的ref调用，更符合React声明式编程的思路，也更易于维护：

1. 创建侧边栏状态上下文 #

新建SidebarContext.js文件：

'use client'

import { createContext, useContext, useState } from 'react';

const SidebarContext = createContext();

export function SidebarProvider({ children }) {
  const [isSidebarVisible, setIsSidebarVisible] = useState(false);

  const toggleSidebar = () => {
    setIsSidebarVisible(prev => !prev);
  };

  return (
    <SidebarContext.Provider value={{ isSidebarVisible, toggleSidebar }}>
      {children}
    </SidebarContext.Provider>
  );
}

export function useSidebar() {
  return useContext(SidebarContext);
}

2. 修改RootLayout.js，使用上下文切换函数 #

'use client'

import './globals.css'
import Menu from '@mui/icons-material/Menu';
import { useSidebar } from '@/components/SidebarContext';

export const metadata = {
  title: 'Audio X',
  description: 'Your favourite music player',
}

const menuIconStyles = {
  fontSize: 30, 
  cursor: 'pointer', 
  marginLeft: 3,
  marginRight: 3
}

export default function RootLayout({ children }) {
  const { toggleSidebar } = useSidebar();
  
  return (
    <html lang="en">
      <body>
        <header className='w-full flex h-16 dark-background-1'>
          <div className='absolute w-60 h-16 top-0 left-0 flex items-center'>
            <Menu htmlColor="white" sx={menuIconStyles} onClick={toggleSidebar}/>
            <h1 className='text-white text-3xl font-bold'>Audio X</h1>
          </div>
        </header>
        {children}
      </body>
    </html>
  )
}

3. 修改SideBar.js，使用上下文状态 #

'use client'

import Menu from '@mui/icons-material/Menu';
import { useSidebar } from '@/components/SidebarContext';

const menuIconStyles = {
  fontSize: 30, 
  cursor: 'pointer', 
  marginLeft: 3,
  marginRight: 3
}

const SideBar = () => {
  const { isSidebarVisible, toggleSidebar } = useSidebar();

  return (
    <nav className={`h-screen w-60 dark-background-1 z-100 fixed top-0 duration-300 ${isSidebarVisible ? 'left-0' : '-left-60'}`}>
      <div className='absolute w-60 h-16 top-0 left-0 flex items-center'>
        <Menu htmlColor="white" sx={menuIconStyles} onClick={toggleSidebar} />
        <h1 className='text-white text-3xl font-bold'>Audio X</h1>
      </div>
    </nav >
  );
}

export default SideBar;

4. 修改page.js，用上下文Provider包裹内容 #

'use client'

import SideBar from '@/components/SideBar';
import { SidebarProvider } from '@/components/SidebarContext';

export default function Home() {
  return (
    <SidebarProvider>
      <main className="flex">
        <SideBar />
      </main>
    </SidebarProvider>
  )
}

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