React/Next.js：如何将Navbar状态传递给子组件SignUpModal

要让子组件SignUpModal能够关闭自身，核心是把父组件Navbar的状态更新方法通过props传递给子组件，具体步骤如下：

1. 修改Navbar组件，传递状态更新回调给SignUpModal #

在Navbar里，将状态更新逻辑封装成关闭回调，作为props传给SignUpModal：

import SignUpModal from '../SignIn/Register';
import { useState } from 'react';
import Link from 'next/link';

function Navbar() {
  const [register, setRegister] = useState(false);

  // 定义关闭模态框的回调
  const handleCloseModal = () => setRegister(false);

  return (
   <>
     {/* 传递onClose回调给子组件，简化条件渲染写法 */}
     {register && <SignUpModal onClose={handleCloseModal} />}
     <nav>
       <div>
        <Link href="/">Home</Link>
        <Link href="/about">About</Link>
        <Link href="/login">Login</Link>
        <button
          type="button"
          onClick={() => setRegister(!register)} > 
          Sign Up
        </button>
      </div>
     </nav>
   </>
 )
}

export default Navbar;

2. 在SignUpModal组件中接收并使用回调 #

在SignUpModal里，接收onClose props，并在关闭按钮的点击事件中调用它：

// ../SignIn/Register.jsx
function SignUpModal({ onClose }) {
  return (
    <div className="modal">
      <h2>Sign Up</h2>
      {/* 表单内容（用户名、密码输入框等） */}
      <button type="button" onClick={onClose}>
        关闭
      </button>
    </div>
  )
}

export default SignUpModal;

原理说明 #

React中父组件的状态只能由自身的状态更新方法修改，但可以通过props将该方法传递给子组件。子组件调用该方法时，本质是触发父组件的状态更新，进而重新渲染UI，实现模态框的关闭。

你也可以直接传递setRegister给子组件（比如<SignUpModal setRegister={setRegister} />），然后在子组件中调用setRegister(false)关闭，但用onClose命名更语义化，能明确该props的作用。

内容的提问来源于stack exchange，提问作者Iroro