Mantine Modals 中嵌套 Select 组件的使用限制与解决方案

问题背景

在使用 Mantine 的模态框(Modal)组件时，开发者可能会遇到一个常见问题：当在确认模态框(Confirm Modal)中嵌套使用 Select 选择器组件时，会出现选择值无法实时更新的情况。具体表现为用户选择选项后，需要关闭并重新打开模态框才能看到更新后的值。

技术原理分析

这个问题的根源在于 Mantine 的模态框管理器(Modals Manager)实现机制。模态框管理器为了优化性能，采用了静态内容渲染策略，这意味着：

1. 模态框内容在打开时被"冻结"，不会响应后续的状态变化
2. 动态内容更新不会触发模态框的重新渲染
3. 嵌套组件之间的联动效果会受到影响

解决方案

Mantine 官方提供了明确的解决方案建议：

方案一：使用基础 Modal 组件替代 Confirm Modal

对于需要包含动态交互内容的场景，推荐使用标准的 Modal 组件而非 Confirm Modal。基础 Modal 组件完全支持动态内容更新，可以正确处理嵌套 Select 组件的联动。

import { Modal } from '@mantine/core';

function CustomModal() {
  return (
    <Modal opened={opened} onClose={onClose}>
      {/* 这里可以正常使用嵌套的 Select 组件 */}
      <Select data={[...]} />
    </Modal>
  );
}

方案二：实现自定义确认对话框

如果需要保持确认对话框的样式和功能，可以基于 Modal 组件自行实现：

function CustomConfirmModal({ opened, onConfirm, onCancel }) {
  return (
    <Modal opened={opened} onClose={onCancel}>
      <Select data={[...]} />
      <Button onClick={onConfirm}>确认</Button>
      <Button onClick={onCancel}>取消</Button>
    </Modal>
  );
}

最佳实践建议

1. 对于简单静态内容的确认场景，继续使用 Confirm Modal
2. 对于包含表单、动态选项等复杂交互的场景，使用基础 Modal 组件
3. 考虑将复杂模态框内容提取为独立组件，提高代码可维护性
4. 对于依赖选择的值，确保在提交时重新获取最新状态

总结

Mantine 的模态框管理器在设计上做出了性能与功能之间的权衡，开发者需要理解这种设计决策背后的考量。通过合理选择组件类型和实现方式，完全可以构建出既美观又功能完善的交互式模态框。记住，框架的限制往往也是引导我们采用更合理架构设计的机会。