React页面多模态框实现：重复导入通用组件的合理性及优化疑问

兄弟，你当前的实现方式确实存在代码冗余和状态管理繁琐的问题——毕竟你导入的ApproveModal和RejectModal本质是同一个组件，只是业务场景不同（审批/拒绝），完全没必要重复导入和维护多个状态。当需要支持3-4种操作时，这种写法会让代码变得臃肿，维护成本直线上升。

下面给你两种实用的优化思路，帮你彻底解决这个问题：

思路1：通过Props复用单个基础模态框 #

核心思路是：只维护一个基础模态框组件，把不同业务场景的差异（标题、内容、按钮文案、回调逻辑等）通过Props传递进去，用单个状态控制模态框的显示/隐藏，再用另一个状态存储当前模态框的配置信息。

代码示例（类组件） #

1. 首先只导入一次基础模态框：

import BaseModal from '~/components/common/modal'

2. 组件内维护状态：

state = {
  isModalOpen: false,
  modalConfig: {
    title: '',
    content: '',
    confirmText: '',
    cancelText: '取消',
    onConfirm: () => {}
  }
}

3. 封装打开不同模态框的方法：

// 打开审批模态框
openApproveModal = () => {
  this.setState({
    isModalOpen: true,
    modalConfig: {
      title: '确认审批',
      content: '你确定要通过该申请吗？',
      confirmText: '审批通过',
      onConfirm: this.handleApproveSubmit
    }
  })
}

// 打开拒绝模态框
openRejectModal = () => {
  this.setState({
    isModalOpen: true,
    modalConfig: {
      title: '确认拒绝',
      content: '你确定要拒绝该申请吗？',
      confirmText: '拒绝申请',
      onConfirm: this.handleRejectSubmit
    }
  })
}

// 模态框关闭逻辑
closeModal = () => {
  this.setState({ isModalOpen: false })
}

// 审批提交逻辑
handleApproveSubmit = () => {
  // 你的审批业务代码
  console.log('执行审批操作')
  this.closeModal()
}

// 拒绝提交逻辑
handleRejectSubmit = () => {
  // 你的拒绝业务代码
  console.log('执行拒绝操作')
  this.closeModal()
}

4. 渲染模态框：

{this.state.isModalOpen && (
  <BaseModal
    {...this.state.modalConfig}
    onClose={this.closeModal}
  />
)}

5. 基础模态框BaseModal需要支持接收这些Props并渲染：

// ~/components/common/modal.jsx
const BaseModal = ({ title, content, confirmText, cancelText, onConfirm, onClose }) => {
  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <h3>{title}</h3>
        <div className="modal-body">{content}</div>
        <div className="modal-footer">
          <button onClick={onClose}>{cancelText}</button>
          <button onClick={onConfirm}>{confirmText}</button>
        </div>
      </div>
    </div>
  )
}

export default BaseModal

思路2：用Render Props/Children传递自定义内容 #

如果不同模态框的内容结构差异很大（比如拒绝模态框需要输入框，审批只需要文字提示），可以用Render Props或者Children传递自定义内容，让基础模态框只负责弹窗的基础样式和显示逻辑。

代码示例（类组件） #

1. 打开模态框时传递自定义内容：

openRejectModal = () => {
  this.setState({
    isModalOpen: true,
    modalConfig: {
      title: '确认拒绝',
      confirmText: '提交拒绝',
      contentRender: () => (
        <div>
          <p>请填写拒绝原因：</p>
          <textarea onChange={this.handleRejectReasonChange} />
        </div>
      ),
      onConfirm: this.handleRejectSubmit
    }
  })
}

2. 基础模态框接收contentRender并渲染：

const BaseModal = ({ title, contentRender, confirmText, cancelText, onConfirm, onClose }) => {
  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <h3>{title}</h3>
        <div className="modal-body">
          {contentRender && contentRender()}
        </div>
        <div className="modal-footer">
          <button onClick={onClose}>{cancelText}</button>
          <button onClick={onConfirm}>{confirmText}</button>
        </div>
      </div>
    </div>
  )
}

为什么这种方式更好？ #

• 消除冗余：只需要导入一次基础模态框，新增操作时只需要添加对应的打开方法和回调，不用重复写模态框渲染代码
• 状态统一：用单个状态控制模态框的显示/隐藏，避免维护多个openXXModal状态带来的混乱
• 扩展性强：后续新增任何类型的模态框，只需要新增配置即可，组件结构清晰易维护

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