如何向以JSX语法传入showModal的组件传递onClose props？

React创建的JSX元素（ReactElement）的props是不可变且冻结的，直接修改modal.props会触发报错。正确的做法是使用React.cloneElement方法复制原组件，并在复制时注入或合并onClose props。

核心解决方案代码 #

import React from 'react';

const showModal = (modal) => {
  // 复制原模态框组件，注入onClose props
  const modalWithCloseHandler = React.cloneElement(modal, {
    // 支持合并用户自定义的onClose逻辑
    onClose: () => {
      // 先执行用户传入的onClose（如果有的话）
      modal.props.onClose?.();
      // 执行库自身的关闭逻辑
      console.log('modal closed!');
      // 这里添加隐藏模态框的状态更新逻辑，比如setIsModalOpen(false)
    }
  });

  // 后续使用modalWithCloseHandler来渲染模态框
  // 例如：setCurrentModal(modalWithCloseHandler)
};

为什么这个方法可行？ #

React.cloneElement会创建一个新的React元素实例，保留原组件的所有属性和子元素，同时允许你覆盖或添加新的props，完全符合React的不可变数据原则，不会触发冻结props的报错。

使用者侧的使用示例 #

用户在自己的MyModal组件里可以直接使用传入的onClose：

const MyModal = ({ prop1, prop2, prop3, onClose }) => {
  return (
    <div className="modal">
      <h1>我的模态框</h1>
      <button onClick={onClose}>关闭</button>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Islam Y-