我剛開始使用樣式化組件，在為自定義組件設定 props 值時遇到了一些問題。我有一個看起來像這樣的卡片組件
<Card className="card" size="none" disableCardClick />
現在我已經將此組件轉換為這樣的 styledComponent
const StyledCard = styled(Card).attrs(props => {
size="none"
disableCardClick
data-test-id="wc-ftu-redesign-card"
})`
height: 100%;
max-width: 927px;
@media (min-width: 810px) {
max-width: 529px;
}
@media (max-width: 810px) {
max-height: 600px;
}
@media (max-width: 650px) {
max-height: 750px;
}
@media (max-width: 550px) {
overflow-y: scroll;
}
`;
從代碼中可以清楚地看出，我在將道具值（大小和 disableCardClick）傳遞給自定義卡片組件時遇到問題。實際上，我什attrs至不確定是否是設定 props 值的正確方法。我想在 styled component 中設定sizeand的值。我怎樣才能做到這一點？“data-test-id”也給了我錯誤。disableCardClickStyledCard; expected
uj5u.com熱心網友回復：
您可以像這樣輕松地將道具傳遞給自定義樣式的組件：
<StyledCard size="none" disableCardClick />styled 組件會自動將你的 props 傳遞給子組件
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/485361.html
標籤：javascript 反应 样式化组件