reactjs - 在 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>

添加细节组件

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