React弹窗组件：如何通过内部按钮关闭弹窗？（props只读场景）

因为React的props是只读属性，无法直接在子组件中修改父组件的状态，所以需要通过回调函数让子组件通知父组件修改状态，从而实现弹窗关闭。具体实现步骤如下：

1. 更新Modal组件的Props定义，添加关闭回调 #

首先在modalProps接口中新增onClose属性，用于接收父组件传递的关闭逻辑：

import React from "react";
import "./Modal.css";

interface modalProps {
    children?: React.ReactNode;
    width: string;
    height: string;
    screenFlood?: boolean; // 使弹窗以外区域变暗
    openModal: boolean;
    onClose: () => void; // 新增关闭回调属性
}

const Modal = (props: modalProps) => {
    
    return props.openModal ? (
        <>
            {props.screenFlood && <div className="modal-screen-flood"></div>}
            <div
                className="modal-container"
                style={{ width: props.width, height: props.height }}
            >
                <div>Modal title</div>
                <div>{props.children}</div>
                <button
                    onClick={props.onClose} // 点击按钮时触发父组件的关闭逻辑
                >
                    关闭弹窗
                </button>
            </div>
        </>
    ) : (
        <></>
    );
};

export default Modal;

2. 父组件传递关闭回调给Modal #

在父组件中，将更新状态的逻辑通过onClose props传递给Modal：

import React, { useState } from "react";
import Modal from "./Modal";

const ParentComponent = () => {
    const [openModal, setOpenModal] = useState(false);

    return (
        <>
            <button onClick={() => setOpenModal(true)}>打开弹窗</button>
            <Modal
                width="800px"
                height="400px"
                screenFlood={true}
                openModal={openModal}
                onClose={() => setOpenModal(false)} // 传递关闭弹窗的状态更新逻辑
            >
                <div>Modal here</div>
            </Modal>
        </>
    );
};

export default ParentComponent;

原理说明 #

React遵循单向数据流规则，弹窗的显示状态openModal由父组件持有和管理。子组件Modal通过接收onClose回调，在内部按钮点击时通知父组件修改状态，父组件状态更新后会重新渲染Modal，最终实现弹窗关闭的效果。

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