Dre*_*rty 16 javascript reactjs material-ui next.js
我创建了一个使用该文件夹的全新 Next.js 应用程序app。然后，我安装了 Materiel UI 并开始使用文档中给出的示例。但我收到这个错误：
类型错误：createContext 仅适用于客户端组件。在文件顶部添加“use client”指令以使用它。
这是我的代码中文档的示例：
import Button from "@mui/material/Button";
export default function Home() {
return (
<div>
<Button variant="contained">Hello World</Button>
</div>
);
}
我希望该按钮显示在我的页面上。我知道"use client"在顶部添加将修复错误，但我希望我的页面在服务器上渲染。
You*_*mar 26
显然，在本例中，您要导入的按钮正在使用客户端挂钩createContext。为此，您需要"use client"在文件顶部添加。但这意味着该页面将成为客户端组件，而不再是服务器组件。
如果这让您感到困扰，您可以例如在添加文件的lib同一级别创建一个文件夹，如下所示：appmui.js
// lib/mui.js
"use client";
export * from "@mui/material";
然后您从那里导入它（这样，页面的其他部分仍然是服务器组件）：
// app/page.js
import { Button } from "../lib/mui";
export default function Home() {
return (
<div>
<Button variant="contained">Hello World</Button>
</div>
);
}
旁注，您在设置上下文时可能会遇到类似的错误。这意味着您正在尝试在服务器组件中设置它。指南是将其添加到其自己的“使用客户端”标记文件中：
// app/theme-provider.tsx
"use client";
import { createContext } from "react";
export const ThemeContext = createContext("");
export default function ThemeProvider({ children }) {
return (
<ThemeContext.Provider value="dark">
{children}
</ThemeContext.Provider>
);
}
并从那里导入它：
// app/layout.js
import ThemeProvider from './theme-provider';
export default function RootLayout({ children }) {
return (
<html>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}
要获得更详细的答案，请查看此线程。
| 归档时间： |
|
| 查看次数： |
26052 次 |
| 最近记录： |