Next.js 13中如何从Header组件控制登录模态框的显示/隐藏？

首先明确：如果给rootLayout加上"use client"，确实会让整个应用的所有子组件都变成客户端组件，完全失去Server Component的渲染优势，这肯定不是最优解。

不用调整整体布局，只需要把模态框的状态逻辑抽离到一个独立的客户端组件容器中，让rootLayout保持Server Component身份，具体操作如下：

• 创建客户端状态容器组件
  新建一个专门管理登录模态框状态的组件，比如LoginModalController.tsx，在这里维护模态框的显示状态，并把状态和切换方法传递给Header和LoginForm：

  // app/components/LoginModalController.tsx
  "use client";
  
  import { useState } from "react";
  import Header from "../Header";
  import LoginForm from "@components/LoginForm";
  
  export default function LoginModalController() {
    const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
  
    return (
      <>
        <Header onLoginClick={() => setIsLoginModalOpen(true)} />
        <LoginForm isOpen={isLoginModalOpen} onClose={() => setIsLoginModalOpen(false)} />
      </>
    );
  }
  

• 修改rootLayout，引入容器组件
  把原来直接引入的Header和LoginForm替换成这个容器组件，rootLayout依然保持Server Component：

  // app/layout.tsx
  import "./globals.css";
  import LoginModalController from "./components/LoginModalController";
  
  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode;
  }) {
    return (
      <html lang="en">
        <head />
        <body className="relative">
          <LoginModalController />
          <main className="p-5">
            <div>{children}</div>
          </main>
        </body>
      </html>
    );
  }
  

• 调整Header组件接收点击回调
  Header需要处理按钮点击事件，所以要标记为"use client"，并接收父组件传递的点击回调：

  // app/Header.tsx
  "use client";
  
  type HeaderProps = {
    onLoginClick: () => void;
  };
  
  export default function Header({ onLoginClick }: HeaderProps) {
    return (
      <header className="navbar">
        {/* 其他导航元素 */}
        <button onClick={onLoginClick} className="login-btn">
          登录
        </button>
      </header>
    );
  }
  

• 调整LoginForm组件根据状态显示
  LoginForm同样标记为"use client"，根据传入的isOpen状态控制显示，同时提供关闭回调：

  // components/LoginForm.tsx
  "use client";
  
  type LoginFormProps = {
    isOpen: boolean;
    onClose: () => void;
  };
  
  export default function LoginForm({ isOpen, onClose }: LoginFormProps) {
    if (!isOpen) return null;
  
    return (
      <div className="fixed inset-0 bg-black/50 flex items-center justify-center">
        <div className="bg-white p-6 rounded-lg">
          <h2>登录</h2>
          {/* 表单内容 */}
          <button onClick={onClose} className="mt-4">
            关闭
          </button>
        </div>
      </div>
    );
  }
  

这样处理后，只有和登录模态框交互相关的组件是客户端组件，rootLayout以及其他页面、组件依然可以保持Server Component，完美兼顾交互需求和服务端渲染的优势。

内容的提问来源于stack exchange，提问作者jethro-dev