我想在我的應用程式中創建一個容器組件。我不知道這是否可能，或者這是否是個好主意。我會很舒服的。
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 組件中
uj5u.com熱心網友回復：
你可以使用它，但你需要在容器內取 de props.chidlren。
export default function CardsContainer({children}){
return(
<div className={styles.CardsContainer}>
{children}
</div>
)
}
但我認為如果你使用樣式組件來創建容器會更好
uj5u.com熱心網友回復：
您需要將元素作為子元素傳遞給 CardsContainer，在 CardsContainer 組件中，您可以使用 children 屬性訪問它。為了更好地理解，您可以參考以下檔案：https ://reactjs.org/docs/composition-vs-inheritance.html#containment
export default function CardsContainer({children}){
return(
<div className={styles.CardsContainer}>
{children}
</div>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/529665.html
上一篇：計算嵌套陣列中的專案數