在Next的经典Pages Router中，您可以在_app. js文件中添加全局提供程序，并将其 Package 在整个组件树中。这将确保提供程序可用于所有组件。如果您使用应用程序路由器执行此操作，则会收到一条错误消息您正在导入一个需要useState的组件。它只能在客户端组件中工作，但它的父组件都没有标记为“使用客户端”，因此它们默认为服务器组件。有没有一种方法可以在不给予服务器组件的情况下实现类似的功能？
zc0qhyus1#
//在_app.js中使用context//user.js
import { createContext, useState, useContext } from "react"; const Context = createContext(); const Provider = ({ children }) => { const [user, setUser] = useState(true); const exposed = { user, }; return <Context.Provider value={exposed}>{children}</Context.Provider>; }; export const useUser = () => useContext(Context); export default Provider;
//_app.js
import UserProvider from "../context/user"; function MyApp({ Component, pageProps }) { return ( <UserProvider> <Component {...pageProps} /> </UserProvider> ); } export default MyApp;
//像这样在任何组件中使用用户状态
import { useUser } from "../context/user"; export default function Home({ lessons }) { const { user } = useUser(); console.log({ user }); return ( <div> </div> ); }
qvsjd97n2#
将提供程序 Package 在客户端组件中。
'use client'; import { SomeProvider } from 'some-library'; export function Providers({ children }) { return ( <SomeProvider> {children} </SomeProvider> ); }
并在根布局中使用此 Package 的提供程序。
import { Providers } from './providers'; export default function RootLayout({ children }) { return ( <html> <body> <Providers>{children}</Providers> </body> </html> ); }
2条答案
按热度按时间zc0qhyus1#
//在_app.js中使用context
//user.js
//_app.js
//像这样在任何组件中使用用户状态
qvsjd97n2#
将提供程序 Package 在客户端组件中。
并在根布局中使用此 Package 的提供程序。