在 React 中制作包装器组件答案

【问题标题】：Make wrapper component in React在 React 中制作包装器组件
【发布时间】：2020-08-29 07:57:03
【问题描述】：

我正在尝试制作一个组件，使其包含另一个 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>
        )

【问题讨论】：

嘿，每当你需要渲染包装器组件内部的东西时，你需要输出 {this.props.children}。例如，在您的添加详细信息中，您执行 render() { return( <div className="col-md-12 bg-white border-radius-10"> {this.props.children} </div> ) }

标签： reactjs typescript react-component

【解决方案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>
    )
}

【讨论】：