cari

Rumah  >  Soal Jawab  >  teks badan

Tambahkan arahan "gunakan klien" di bahagian atas fail, TypeError: createContext hanya berfungsi untuk komponen klien

Saya mencipta aplikasi Next.js serba baharu yang menggunakan folder app. Kemudian saya memasang UI Materiel dan mula menggunakan contoh yang diberikan dalam dokumentasi. Tetapi saya mendapat ralat ini:

Ralat jenis: createContext hanya berfungsi pada komponen klien. Tambahkan arahan "gunakan klien" di bahagian atas fail untuk menggunakannya.

Berikut ialah contoh dokumentasi dalam kod saya: 

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

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

Saya mahu butang ini dipaparkan pada halaman saya. Saya tahu menambahkan "use client" di bahagian atas akan membetulkan ralat, tetapi saya mahu halaman saya dipaparkan pada pelayan.

P粉811349112P粉811349112437 hari yang lalu938

membalas semua(2)saya akan balas

  • P粉642436282

    P粉6424362822023-10-26 13:18:31

    Untuk menjadikan MUI berfungsi dengan sempurna dengan SSR, anda perlu membuat beberapa pelarasan: https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts.

    Nota: Walaupun anda mengkonfigurasinya dengan betul, butang itu boleh dipaparkan di sebelah pelayan, tetapi anda tidak boleh menetapkan pengendali onClick (jika saya ingat dengan betul)

    balas
    0
  • P粉502608799

    P粉5026087992023-10-26 00:38:54

    Nampaknya butang yang anda import menggunakan cangkuk pelanggan, dalam kes ini createContext。为此，您需要在文件顶部添加“use client”. Tetapi ini bermakna halaman itu menjadi komponen pelanggan dan tidak berhenti menjadi komponen pelayan.

    Jika ini mengganggu anda, anda boleh menambah fail app 同一级别创建一个 libmui.js dalam folder yang sama seperti < /code> seperti ini: 

    // lib/mui.js

"use client";

export * from "@mui/material";

    Kemudian anda mengimportnya dari sana (dengan cara ini seluruh halaman masih merupakan komponen pelayan): 

    // app/page.js

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

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

    Nota sampingan, anda mungkin menghadapi ralat yang sama semasa menyediakan konteks. Ini bermakna anda cuba untuk menetapkannya dalam komponen pelayan. Garis Panduan ialah menambah ini pada fail tag "Use Client" sendiri: 

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

    dan import dari sana: 

    // app/layout.js

import ThemeProvider from './theme-provider';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

    Untuk jawapan yang lebih terperinci, lihat benang ini.

    balas
    0
  • Batalbalas