在react中制作包装组件

Question

我希望你做得很好。我正试图制作一个组件，使它与React自定义组件一起容纳另一个HTML元素。我创建了这个组件，但它没有按照我的要求工作。目前，它没有得到渲染。请大家帮忙。

整个组件结构

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

详细正文

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

细节头

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

详细页脚

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