Next.js 13同布局下如何从Sidebar调用Page中的变量

项目结构 #

app
 |- components
       |-header.tsx
       |- footer.tsx
       |- sidebar.tsx
 |- dashboard
       |- layout.tsx
       |- page.tsx

当前问题 #

你在dashboard/page.tsx中定义了activeItem = 'dashboard'，想在components/sidebar.tsx中使用这个变量，但直接导入Dashboard组件的写法无效——因为组件内部的局部变量无法被外部直接访问。

解决方案 #

方案1：通过Layout组件传递Props #

利用Layout作为中间层，将页面的activeItem传递给Sidebar：

1. 修改dashboard/layout.tsx：
   添加状态管理，并将activeItem通过props传给Sidebar，同时给页面组件传递更新状态的方法：

   'use client';
   import { useState, ReactNode } from 'react';
   import Header from '@/components/header';
   import Sidebar from '@/components/sidebar';
   import Footer from '@/components/footer';
   
   export default function DashboardLayout({ children }: { children: ReactNode }) {
       const [activeItem, setActiveItem] = useState('dashboard');
   
       // 给页面组件传递setActiveItem方法
       const childrenWithProps = React.Children.map(children, child => {
           if (React.isValidElement(child)) {
               return React.cloneElement(child, { setActiveItem });
           }
           return child;
       });
   
       return (
           <div>
               <Header />
               <div className="grid h-[700px]">
                   <div className="col-span-2">
                       <Sidebar activeItem={activeItem} />
                   </div>
                   <div className="col-span-4 bg-gray-100">
                       {childrenWithProps}
                       <Footer />
                   </div>
               </div>
           </div>
       )
   }
   

2. 修改dashboard/page.tsx：
   接收setActiveItem并设置初始的activeItem值：

   'use client';
   import { useEffect } from 'react';
   
   export default function Dashboard({ setActiveItem }: { setActiveItem: (item: string) => void }) {
       const activeItem = 'dashboard';
   
       useEffect(() => {
           setActiveItem(activeItem);
       }, [setActiveItem, activeItem]);
   
       return (
           <div>
               this is dashboard
           </div>
       )
   }
   

3. 修改components/sidebar.tsx：
   接收activeItem props并使用：

   export default function Sidebar({ activeItem }: { activeItem: string }) {
       return (
           <div>{activeItem}</div>
       )
   }
   

方案2：使用React Context全局共享状态 #

如果后续多个组件需要用到activeItem，用Context更方便：

1. 创建Context文件app/contexts/ActiveItemContext.tsx：

   'use client';
   import { createContext, useContext, useState, ReactNode } from 'react';
   
   interface ActiveItemContextType {
       activeItem: string;
       setActiveItem: (item: string) => void;
   }
   
   const ActiveItemContext = createContext<ActiveItemContextType | undefined>(undefined);
   
   export function ActiveItemProvider({ children, initialActiveItem }: { children: ReactNode, initialActiveItem: string }) {
       const [activeItem, setActiveItem] = useState(initialActiveItem);
       return (
           <ActiveItemContext.Provider value={{ activeItem, setActiveItem }}>
               {children}
           </ActiveItemContext.Provider>
       )
   }
   
   export function useActiveItem() {
       const context = useContext(ActiveItemContext);
       if (!context) {
           throw new Error('useActiveItem必须在ActiveItemProvider内部使用');
       }
       return context;
   }
   

2. 修改dashboard/layout.tsx：
   用ActiveItemProvider包裹所有子组件：

   'use client';
   import { ActiveItemProvider } from '@/app/contexts/ActiveItemContext';
   import Header from '@/components/header';
   import Sidebar from '@/components/sidebar';
   import Footer from '@/components/footer';
   
   export default function DashboardLayout({ children }: { children: ReactNode }) {
       return (
           <ActiveItemProvider initialActiveItem="dashboard">
               <Header />
               <div className="grid h-[700px]">
                   <div className="col-span-2">
                       <Sidebar />
                   </div>
                   <div className="col-span-4 bg-gray-100">
                       {children}
                       <Footer />
                   </div>
               </div>
           </ActiveItemProvider>
       )
   }
   

3. 修改components/sidebar.tsx：
   通过自定义Hook获取activeItem：

   'use client';
   import { useActiveItem } from '@/app/contexts/ActiveItemContext';
   
   export default function Sidebar() {
       const { activeItem } = useActiveItem();
       return (
           <div>{activeItem}</div>
       )
   }
   

原写法无效的原因 #

组件内部的局部变量（比如Dashboard里的activeItem）是组件封装的一部分，外部组件无法直接访问。必须通过props传递、Context共享这类规范的方式来实现组件间的数据共享。

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