小编Jac*_*ats的帖子

如何向 React 服务器组件提供上下文 (Next.js 13.2)?(例如主题)

我\xe2\x80\x99已经使用React服务器组件近两周了,这个问题一直让我伤脑筋:如何为服务器组件提供上下文?例如,提供一个主题(例如深色|浅色模式)?我已经检查了 Nextjs 文档很多次,并且读到了同样的内容,就好像它会改变一样。它声明只有客户端组件可以使用Context。那么,如果服务器组件需要不基于服务器的数据,它将如何使用Context?我可以\xe2\x80\x99t 获取基于状态的数据。有没有人想办法解决这个问题?

\n
    <html>\n      <body className="page-container">\n        <ThemeProvider>\n          {children} // Combination of Server and Client components\n        </ThemeProvider>\n      </body>\n    </html>\n
Run Code Online (Sandbox Code Playgroud)\n
export default async function ServerComponent(){\n ...\n const theme = useContext(ThemeContext) // Would give an error; not a client component\n ...\n return (\n  <div className={theme}>\n   ...\n  </div>\n)\n}\n
Run Code Online (Sandbox Code Playgroud)\n

我已经完成了 Next.js beta 文档中所说的所有内容:将提供程序放在客户端组件中,并让服务器组件成为所述客户端组件的子组件。现在,我只是想知道如何使用服务器组件中的上下文;它适用于客户端组件,因为它们允许使用钩子,但不适用于服务器组件。

\n

javascript reactjs react-context react-server-components next.js13

11
推荐指数
1
解决办法
4260
查看次数