Как открыть/закрыть модальное окно из моего компонента заголовка в Next.js 13?

Я создаю приложение для электронной коммерции с Next.js 13 для развлечения. У меня возникают трудности, когда я пытаюсь сделать модальное окно входа, которое появляется, когда я нажимаю кнопку в компоненте.

Мой подход состоял бы в том, чтобы сделатьuseStateу родителя, которыйrootLayoutздесь передайте сеттер<Header/>, и передать состояние вmodal.

Но мой вопрос в том, что, поскольку я буду использовать useState для переключения видимости модального окна, мне нужно будет использовать клиентский компонент, объявив"use client". Но если я использую «использовать клиент» в своем корневом макете и использую здесь хук useState, сделает ли это все мое приложение?clientкомпонент? Если это так, то это не идеально. Как мне это реализовать? Это плохой макет? Должен ли я изменить его? Спасибо.

Это мой корневой макет:

      import "./globals.css";
import Header from "./Header";
import LoginForm from "@components/LoginForm";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head />
      <body className="relative">
        <Header />  <-------------------------- THIS IS THE HEADER/NAVBAR COMPONENT
        <main className="p-5">
          <div>{children}</div>
        </main>
        <LoginForm /> <------------------------ THIS IS THE LOGIN MODAL COMPONENT
      </body>
    </html>
  );
}
Источник

0 ответов

Другие вопросы по тегам