Я узнал из видео, что использовать механизм контекста нельзя в серверных компонентах, но можно создать отдельный файл и из него уже импортировать весь нужный функционал в серверные и клиентские компоненты. Вот собственно этот файл:
"use client";
import { createContext, useContext } from "react";
const initialData = {
theme: {
color: "dark",
},
};
let context = createContext(initialData);
export function Provider({ children }) {
return <context.Provider value={context}>{children}</context.Provider>;
}
export const getCotnext = () => useContext(context);
Также вот рутовский layout:
import "./globals.css";
import { Provider } from "./components/provider";
//...не важный код для сути
export default function RootLayout({ children }) {
return (
<Provider>
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
</Provider>
);
}
И теперь вот файл уже layout того роута, в котором у меня находится логика контекста:
"use client";
import { getCotnext } from "../components/provider";
export default function ({ children, todoone }) {
let context = getCotnext();
console.log(context);
return (
<div>
{context.theme}
{todoone}
{children}
</div>
);
}
Но в консоли у меня вывелось:
Можете подсказать, почему у меня не вывелся объект theme.
Средний
Средний
