我有這樣的 React-bootstrap 代碼示例：
import Media from 'react-bootstrap/Media';
const Product = (props) => {
return (
<div>
<Media>
<img
width={64}
height={64}
className="mr-3"
src={props.data.imageUrl}
alt="Product Imag"
/>
<Media.Body>
<h5> {props.data.productName} </h5>
{props.data.releasedDate }
<Rating
rating={props.data.rating} numOfReviews={props.data.numOfReviews}
/>
<p> {props.data.description} </p>
</Media.Body>
</Media>
</div>
);
}
但似乎在 react-bootstrap 版本 2.2.3 中進行了一些更改，現在不再有標簽和 <Media.Body>
那么如何根據當前版本替換此標簽？
uj5u.com熱心網友回復：
從您的代碼中，我會說 Card 或 Image 組件是您正在尋找的：
卡片
圖片
看起來您只需在上面的示例中重構Media即可Card使其正常作業。
uj5u.com熱心網友回復：
正如@arfi720 所提到的，您似乎可以遷移到Card和Image組件。因為 bootstrap 主要是 css/styling，所以你可以把它改成你想要的任何東西。或者你不需要使用不適合你的東西（這里Card.Img）。幾天前我剛剛創建了類似的組件并將Image放入Card.Body，因為它已經水平堆疊：
<Card style={{ width: "18rem" }}>
<Card.Body>
<Image src="holder.js/100x50" className="me-2" />
Test
</Card.Body>
</Card>
https://codesandbox.io/s/unruffled-ishizaka-l70ftr?file
uj5u.com熱心網友回復：
所以這個案例的最終解決方案是這樣的：
import { Card } from "react-bootstrap";
import Rating from './Rating';
const styles={
cardStyle:{
'flex-direction': 'row',
'align-items': 'center'
},
cardImgStyle: {
width: '64px',
height: '64px',
}
}
const Product = (props) => {
return (
<div>
<Card style={styles.cardStyle}>
<Card.Img style={styles.cardImgStyle}
className="ms-3"
src={props.data.imageUrl}
alt="Product Imag"
/>
<Card.Body>
<h5> {props.data.productName} </h5>
{props.data.releasedDate }
<Rating
rating={props.data.rating} numOfReviews={props.data.numOfReviews}
/>
<p> {props.data.description} </p>
</Card.Body>
</Card>
</div>
);
}
export default Product;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/464156.html