反应-功能组件容器

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组件中。我想加入

Answer 1

您可以使用这个，但是您需要在容器中使用de props.chidlren。

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

但我认为如果您使用样式组件来创建de容器，情况会更好。

Answer 2

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

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