在React中生成包装器组件

Question

我正在尝试制作一个组件，使其包含另一个HTML元素以及React自定义组件。我创建了组件，但它并没有像我想要的那样工作。目前，它还没有被渲染。

整体组件结构

<AddingDetail>
                        <div className="row">
                            <DetailHeader link="/dashboard/setting" linkText="Back" heading="Add Role" />
                            <DetailBody>
                                <h1>Hello</h1>

                            </DetailBody>
                            <DetailFooter buttonText="Add" />
                        </div>
</AddingDetail>

AddingDetail组件

render()
    {
        return(
            <div className="col-md-12 bg-white border-radius-10">
            </div>
        )
    }

DetailBody

render()
    {
        return(
            <div className="col-md-12">
            </div>
        )
    }

DetailHeader

return(
            <div className="col-md-12 mgb-30" style={border} >
            <div className="row" style={{marginBottom:'10px'}}>
            <div className="col-md-6 flex vertical-center">
                <h3 className="sub-heading roboto mgb-0">{this.props.heading}</h3>
            </div>
            <div className="col-md-6 align-right flex vertical-center flex-end">
                <Link to={this.props.link}>
                    <button type="button" className="golden-button">{this.props.linkText}}</button>
                </Link>
            </div>
            </div>
        </div>
        )

DetailFooter

return(
            <div className="col-md-12 align-center mgb-20 mgt-20">
                        <button type="button" className="golden-button">{this.props.buttonText}</button>
            </div>
        )

Answer 1

您可以使用props.children在AddingDetail中显示内容：

render() {
    return(
        <div className="col-md-12 bg-white border-radius-10">
            { this.props.children } //<---- HERE
        </div>
    )
}

您可以将相同的更改应用于DetailBody。

render() {
    return(
        <div className="col-md-12">
            { this.props.children }
        </div>
    )
}