React中如何用Modal组件创建多弹窗且无需单独状态变量

完全可以实现，你只需要用单个对象状态统一管理所有弹窗的开闭状态，不用为每个弹窗单独定义state变量。具体做法如下：

1. 替换单个状态为对象状态 #

把原来的单个isOpen状态改成对象结构，每个弹窗对应一个唯一标识（比如dialog1、dialog2），值为布尔值表示弹窗是否打开：

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

const Index = () => {
    // 用对象统一管理所有弹窗的状态
    const [modalStates, setModalStates] = useState({
        dialog1: false,
        dialog2: false
    });

    // 通用弹窗切换函数，接收弹窗唯一标识作为参数
    const toggleModal = (modalKey) => {
        setModalStates(prevState => ({
            ...prevState,
            [modalKey]: !prevState[modalKey]
        }));
    };

    return (
        <div>
            {/* 触发按钮：调用toggleModal并传入对应弹窗的标识 */}
            <div onClick={() => toggleModal('dialog1')}>Dialog 1</div>
            <div onClick={() => toggleModal('dialog2')}>Dialog 2</div>

            {/* 弹窗组件：传入对应标识的状态和切换函数 */}
            <Modal 
                isOpen={modalStates.dialog1} 
                toggle={() => toggleModal('dialog1')}
            >
                Dialog 1 content
            </Modal>

            <Modal 
                isOpen={modalStates.dialog2} 
                toggle={() => toggleModal('dialog2')}
            >
                Dialog 2 content
            </Modal>
        </div>
    );
};

export default Index;

2. 后续新增弹窗的扩展方式 #

如果需要添加新弹窗，只需要两步：

• 在modalStates对象里新增键值对（比如dialog3: false）
• 新增触发按钮和对应的Modal组件，传入对应的标识即可

这种方式的优势：

• 不用维护多个独立state变量，状态管理更集中
• 逻辑复用性强，新增弹窗的成本极低
• 原有Modal.tsx组件完全不需要修改，直接复用即可

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