已固定isOpen属性的react-modal封装组件如何在外部覆盖该属性

问题根源 #

你封装的ModalWrapper组件没有接收、透传外部传入的属性，内部isOpen被固定为静态值，所以外部传入的动态状态完全没有生效。

方案1（推荐：可修改封装组件时使用） #

调整ModalWrapper的属性赋值顺序，将透传外部属性的操作放在固定配置之后，外部传入的同名属性会自动覆盖内部默认值：

const ModalWrapper = props => {
    return (
        <Modal
            // 固定不变的配置放在前面
            isOpen={true}
            ariaHideApp={false}
            // 透传所有外部传入的属性，同名属性会覆盖上面的默认配置
            {...props}
        >
            {props.children}
        </Modal>
    )
};

调整后你在外部传入的isOpen={this.state.showModal}、onRequestClose={this.handleCloseModal}都会正常生效，不需要修改使用侧的代码。

方案2（兜底：无法修改封装组件源码时使用） #

如果你没有权限修改ModalWrapper的代码，可以在使用侧通过React.cloneElement强制覆盖组件属性：

import { cloneElement } from 'react';
import ModalWrapper from '../components/CModal/ModalWrapper';

// 你的原有渲染逻辑
return cloneElement(
  <ModalWrapper
    isOpen={this.state.showModal}
    onRequestClose={this.handleCloseModal}
  >
    {/* 模态框内容 */}
  </ModalWrapper>,
  // 第二个参数传入要覆盖的属性
  { isOpen: this.state.showModal }
);

内容的提问来源于stack exchange，提问作者K. Nathan