Next.js 13：如何从组件向page.js传递Context Provider？

核心问题分析 #

1. Provider层级错误：你把SearchContext.Provider放在了MobileNav组件内部，仅包裹了自身的JSX。而page.js作为layout的children，和MobileNav是同级关系，不在Provider的子组件树中，因此无法获取Context值。
2. 拼写与取值错误：
   • page.js中"use clinet"应为"use client"
   • MobileNav中setHideDive应为setHideDiv
   • page.js中ShowDiv.HideDiv.search_section取值错误，因为你传递的是布尔值HideDiv.search_section，而非包含HideDiv的对象
3. 导入导出不匹配：nav_context.js用命名导出export const SearchContext，但你在其他文件中用默认导入，导致无法正确获取Context。

修正后的代码实现 #

1. 调整 Context 文件（context/nav_context.js）

给Context设置默认值，避免useContext返回null报错：

import { createContext } from 'react'

// 默认值包含状态和更新函数，确保组件调用时不会报错
export const SearchContext = createContext({
  searchSectionVisible: true,
  setSearchSectionVisible: () => {},
})

2. 提升 Provider 到 Layout 层级（layout.js）

将状态和Provider移到layout中，确保MobileNav和page.js都在Provider的子树里：

"use client"
import { useState } from 'react'
import { SearchContext } from './context/nav_context'
import MobileNav from './components/nav'
import DesktopNav from './components/DesktopNav' // 请确保该组件路径正确

export default function RootLayout({ children }) {
  // 在这里管理共享状态，所有子组件都能访问
  const [searchSectionVisible, setSearchSectionVisible] = useState(true)

  return (
    <html lang="en">
      <body>
        <SearchContext.Provider value={{ searchSectionVisible, setSearchSectionVisible }}>
          <MobileNav />
          <DesktopNav />
          {children} {/* page.js 在这里，属于 Provider 的子组件 */}
        </SearchContext.Provider>
      </body>
    </html>
  )
}

3. 修改 MobileNav 组件（components/nav.js）

不再在组件内部维护状态，而是从Context获取更新函数来控制状态：

"use client"
import React, { useContext } from 'react'
import { SearchContext } from '../context/nav_context'

export default function MobileNav() {
  const { setSearchSectionVisible } = useContext(SearchContext)

  // 示例：添加切换按钮，你可以根据自己的需求修改触发逻辑
  const toggleSearchSection = () => {
    setSearchSectionVisible(prev => !prev)
  }

  return (
    <>
      {/* 你的导航原有JSX */}
      <button onClick={toggleSearchSection}>切换搜索区域显示</button>
      {/* 其他导航内容 */}
    </>
  )
}

4. 修正 Page 组件（page.js）

修复拼写错误，正确获取Context值并控制组件显示：

"use client"
import Post from './components/Post' 
import Story from './components/Story'
import { SearchContext } from './context/nav_context'
import { useContext } from 'react' 

export default function Home() {
  const { searchSectionVisible } = useContext(SearchContext) 

  return (
    <>
      {/* 注意：多个组件需要用Fragment包裹 */}
      {searchSectionVisible && (
        <>
          <Post/>
          <Story/>
        </>
      )}
    </>
  )
}

关键逻辑说明 #

React Context的作用域是Provider的子组件树，只有被Provider直接或间接包裹的组件才能通过useContext获取值。将Provider提升到layout层级后，MobileNav和page.js都成为Provider的子组件，就能实现状态的共享与传递。

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