Javascript 如何允许modal在React中关闭自身？

我有一个基本的，一页的React应用程序的模式窗口。我构建了模态组件，如下所示：

class Modal extends Component {
    render() {
        return (
            <div className="Modal">
                <button
                    className="Modal-close"
                    onClick={this.props.closeModal}>
                    ✖
                </button>
                <div
                    className="Modal-contentContainer"
                    onKeyDown={e => {
                        if (e.keyCode === 27) {
                            this.props.closeModal();
                        }
                    }
                }>
                    {this.props.content}
                </div>
            </div>
        );
    }
}

如您所见，模态的特定内容通过content prop传递。但是，我希望能够在身份验证模式中的特定过程结束时让模式本身调用closeModal，但我不知道如何做到这一点。有没有一种简单的方法可以将函数添加到内容道具中？还是有一种完全不同的方式来创建modals？

您可以使用React.cloneElement将其他属性传递给content元素：

---

这正是我想要的；我一直在尝试使用Object.assign，但react阻止了它。谢谢。我很高兴能帮上忙：

class Modal extends Component {
  render() {

    const extendedContent = React.cloneElement(this.props.content, {
       closeModal: this.props.closeModal
    });

    return (
        <div className="Modal">
            <button
                className="Modal-close"
                onClick={this.props.closeModal}>
                ✖
            </button>
            <div
                className="Modal-contentContainer"
                onKeyDown={e => {
                    if (e.keyCode === 27) {
                        this.props.closeModal();
                    }
                }
            }>
                {extendedContent}
            </div>
        </div>
    );
  }
}