React Modal背景遮罩亮度异常求助：联系人数量影响深浅

项目中的联系人表格点击删除图标会弹出确认删除的Modal，但表格内有6条联系人信息时，Modal的背景遮罩颜色较深；仅包含2条联系人信息时，遮罩颜色偏浅，如何解决？

现有代码 #

Modal组件代码 #

return (
  <>
    <Modal
      show={show}
      onHide={handleClose}
      backdrop="static"
      keyboard={false}
    >
      {children}
    </Modal>
  </>
);

表格页面代码 #

return (
  <>
    <tr>
      <td>{addForm.fullName}</td>
      <td>   {addForm.email}</td>
      <td>{addForm.phoneNumber}</td>
      <td>{addForm.country}</td>
      <td>
          <div className="icon-delete" onClick={() => setShowModal(true)}> </div>
      </td>
    </tr>
   <ModalComponent
    show={showModal}
    handleClose={handleClose}>
    <Modal.Header closeButton>
            </Modal.Header>
    <Modal.Body>
     <p> <b> Are you sure you want to delete? </b> </p>
    </Modal.Body>
  <Modal.Footer>
    <Button variant="primary" onClick={()=> handleClose(addForm.id)}>
      Yes
    </Button>
    <Button variant="secondary" onClick={()=>setShowModal(false)}> No </Button>
  </Modal.Footer>
  </ModalComponent>
        </>
);

问题截图 #

• 联系人数量多时的深色背景：
  
• 联系人数量少时的浅色背景：
  

解决方案 #

问题原因 #

你把ModalComponent放在了表格的<tr>循环体内，导致表格有N条数据时，页面上会渲染N个Modal组件。多个遮罩层叠加后，联系人数量越多，遮罩颜色越深；数量越少，颜色越浅。

修复步骤 #

1. 将ModalComponent从表格的循环体中移出，放到整个表格组件的外层，确保页面上只存在一个Modal实例。
2. 新增状态存储当前要删除的联系人ID，点击删除图标时记录该ID，在Modal确认按钮中使用这个ID执行删除操作。

修改后的代码示例 #

表格页面代码

import { useState } from 'react';
import { Modal, Button } from 'react-bootstrap';
import ModalComponent from './ModalComponent';

const ContactTable = ({ contacts }) => {
  const [showModal, setShowModal] = useState(false);
  const [deleteId, setDeleteId] = useState(null);

  // 点击删除图标，记录要删除的ID并打开Modal
  const handleDeleteClick = (id) => {
    setDeleteId(id);
    setShowModal(true);
  };

  // 关闭Modal并清空删除ID
  const handleClose = () => {
    setShowModal(false);
    setDeleteId(null);
  };

  // 确认删除操作
  const confirmDelete = () => {
    // 这里写入你的删除逻辑，例如调用API删除对应ID的联系人
    // deleteContact(deleteId);
    handleClose();
  };

  return (
    <>
      {/* 表格数据循环，仅渲染表格行 */}
      {contacts.map(addForm => (
        <tr key={addForm.id}>
          <td>{addForm.fullName}</td>
          <td>{addForm.email}</td>
          <td>{addForm.phoneNumber}</td>
          <td>{addForm.country}</td>
          <td>
            <div className="icon-delete" onClick={() => handleDeleteClick(addForm.id)}></div>
          </td>
        </tr>
      ))}

      {/* 单个Modal实例，放在循环体外 */}
      <ModalComponent show={showModal} handleClose={handleClose}>
        <Modal.Header closeButton></Modal.Header>
        <Modal.Body>
          <p><b>Are you sure you want to delete?</b></p>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="primary" onClick={confirmDelete}>
            Yes
          </Button>
          <Button variant="secondary" onClick={handleClose}> No </Button>
        </Modal.Footer>
      </ModalComponent>
    </>
  );
};

export default ContactTable;

Modal组件代码（无需修改）

import { Modal } from 'react-bootstrap';

const ModalComponent = ({ show, handleClose, children }) => {
  return (
    <>
      <Modal
        show={show}
        onHide={handleClose}
        backdrop="static"
        keyboard={false}
      >
        {children}
      </Modal>
    </>
  );
};

export default ModalComponent;

效果说明 #

修改后，无论表格有多少条数据，页面上始终只有一个Modal和对应的遮罩层，遮罩颜色会保持一致，不会出现叠加导致的深浅差异。

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