Javascript 如何正确修复createContext only works in Client Components错误而不失go 所有服务器组件的好处

发布于05月05日

我创建了一个全新的Next.js应用程序，它使用app文件夹.然后，我安装了material 用户界面，并开始使用example given on the doc.但我得到了这样的错误:

TypeError:createContext仅在客户端组件中有效.在文件顶部添加"Use Client"指令以使用它.

下面是我代码中的文档示例:

import Button from "@mui/material/Button";

export default function Home() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  );
}

我希望在我的页面上显示该按钮.我知道在顶部添加"use client"可以修复错误，但我希望我的页面在服务器上重新呈现.

推荐答案

正如您所说，在文件顶部添加"use client"可以解决您的问题.但这将意味着页面会变成Client Component，失go Server Component的好处.

如果这让您感到困扰，例如，您可以在与app相同的级别创建一个lib文件夹，在其中添加一个mui.js文件，如下所示:

// lib/mui.js

"use client";

export * from "@mui/material";

然后你从那里导入Button美元:

// app/page.js

import { Button } from "../lib/mui";

export default function Home() {
  return (
    <div>
      <Button variant="contained">Hello World</Button>
    </div>
  );
}

附注，您在设置上下文时可能会遇到类似的错误.这意味着您试图在服务器组件中设置它.guideline要把它添加到自己的"use client"标记的文件中:

// 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>
  );
}