React函数式组件：如何正确封装CardsContainer容器组件？

想在React应用中创建一个容器组件，目前在App组件里用带styles.CardsContainer类名的div包裹CardPrice组件，想改成用自定义的CardsContainer组件包裹，但当前写法无法正常工作，且不想把CardPrice组件硬编码进CardsContainer内部，希望在App组件里完成包裹。

原代码示例：

export default function App(){
    return(
           <div className={styles.CardsContainer}>
                <CardPrice price={700}/>
                <CardPrice price={3000}/>
                <CardPrice price={5000}/>
          </div>
    )
}

期望写法：

export default function App(){
    return(
           <CardsContainer>
                <CardPrice price={700}/>
                <CardPrice price={3000}/>
                <CardPrice price={5000}/>
          </CardsContainer>
    )
}

当前CardsContainer组件写法：

export default function CardsContainer(){
    return(
           <div className={styles.CardsContainer}>

           </div>
    )
}

你的CardsContainer组件失效的核心原因是没有接收并渲染子组件（children）。在React中，组件标签内部的内容会自动作为children属性传递给组件，你只需要在CardsContainer中接收这个属性，并在内部的div里渲染它即可。

修改后的CardsContainer组件代码：

export default function CardsContainer({ children }){
    return(
           <div className={styles.CardsContainer}>
                {children}
           </div>
    )
}

这样修改后，App组件的期望写法就能正常工作——CardPrice组件会作为children传递给CardsContainer，并被渲染在带有目标样式类的div内部，既满足了自定义容器的需求，也不需要把CardPrice硬编码进容器组件里。

内容的提问来源于stack exchange，提问作者ErikKey