Question

我是React的新手，我正在努力加快一些基本概念的速度，试图将其变为现有的应用程序（旨在将整个应用程序慢慢转换为React）。所以这可能是一个不同的基本问题。

我首先转换我的对话框（我的应用程序有一堆引导模式对话框），所以我使用react-modal库来创建这些对话框。我想要做的是使该对话框的外部标记可以在我的所有对话框中重复使用。例如，使用此渲染方法：

render() {
        return(
            <Modal
                className="Modal__Bootstrap modal-dialog"
                closeTimeoutMS={150}
                isOpen={this.state.modalIsOpen}
                onRequestClose={this.handleModalCloseRequest}
            >
                <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" onClick={this.handleModalCloseRequest}>
                            <span aria-hidden="true">&times;</span>
                            <span className="sr-only">Close</span>
                        </button>
*******INSERT HEADER COMPONENT*******
                    </div>
                    <div className="modal-body">
*******INSERT BODY COMPONENT*******    
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-default" onClick={this.handleModalCloseRequest}>Cancel</button>

*******INSERT ADDITIONAL FOOTER BUTTONS COMPONENT*******

                    </div>
                </div>
            </Modal>
        );
    }

我希望以********开头的行是每个对话框适当（和不同）的可变组件。

显然，对于每个对话框，我可以将此渲染方法复制并粘贴到该对话框的类中，并为该对话框提供硬编码组件。像（身体）的东西：

                    <div className="modal-body">
                        <DialogABody />
                    </div>

和

                    <div className="modal-body">
                        <DialogBBody />
                    </div>

但如果我这样做，那么我就会复制对话框的所有标记＆＃34; chrome＆＃34;反应。

基本上，我需要某种动态组件？

这可能吗？

Answer 1

使用所需组件作为道具调用模型对话框。

<model header={headerComponent} body={bodyComponent}/>

在模型渲染中只需放置{this.props.header}等等。

Answer 2

对于一个子组件，您只需使用this.props.children，但是，由于您有3个组件，因此需要将它们放入单独的道具中：

<DialogBody header={<div>header</div>} body={<div>body</div>} footer={<div>footer</div>}/>

Answer 3

你想要做的模态反应课

class Modal extends React.Component {
    render() {
        return (
            <div>
            {this.props.header ? <HeaderComponent text={this.props.header} /> : null }
            {this.props.children}
            {this.props.footer ? <FooterComponent text={this.props.footer} /> : null }
            </div>
    }
}

然后在调用此传递你的道具

<Modal
    className="Modal__Bootstrap modal-dialog"
    closeTimeoutMS={150}
    isOpen={this.state.modalIsOpen}
    onRequestClose={this.handleModalCloseRequest}
    header="My Header"
    footer="My Footer"
>

对于body组件，你应该在调用它时将它作为prop对象类传递给它。

而不是：

<div className="modal-body">
    <DialogABody />
</div>

你应该有这个：

<div className="modal-body">
    {this.props.dialogComponent}
</div>

通过父类传递到此类

ReactJs创建具有多个不同子级的可重用组件

3 个答案: