React -功能组件容器

Question

我想在我的应用程序中创建一个容器组件。我不知道这是否可能，或者这是不是一个好主意。我会很舒服的。

From this:
export default function App(){
return(
<div className={styles.CardsContainer}>
<CardPrice price={700}/>
<CardPrice price={3000}/>
<CardPrice price={5000}/>
</div>
)
}
I want to do it:
export default function App(){
return(
<CardsContainer>
<CardPrice price={700}/>
<CardPrice price={3000}/>
<CardPrice price={5000}/>
</CardsContainer>
)
}

I do this in CardsContainer:
export default function CardsContainer(){
return(
<div className={styles.CardsContainer}>
</div>
)
}

显然它不工作)但我不知道如何正确包装。我不想把带有CardPrice的组件放在CardContainer组件中。我想用App component

包装

Answer 1

你可以使用这个，但是你需要使用de props。

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

但是我认为如果你使用样式组件来创建de container会更好

Answer 2

您需要将元素作为子元素传递给CardsContainer，并且在CardsContainer组件中您可以使用children prop访问它。为了更好地理解，您可以参考这些文档:https://reactjs.org/docs/composition-vs-inheritance.html#containment

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