Question

我有一个基本的单页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>
        );
    }
}

如您所见，模态的特定内容通过内容道具传递。但是，我希望能够让模式本身在身份验证模式的特定进程结束时调用closeModal，而我无法弄清楚如何执行此操作。有没有一种简单的方法将函数添加到内容道具？或者我是否应该以完全不同的方式创建模态？

Answer 1

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

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>
    );
  }
}

如何让模态在React中关闭？

1 个答案: