如何在 react-bootstrap 2.2.3 中替换标签 <Media> 和 <Media.Body>？

Question

我有这样的 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 中进行了一些更改，现在不再有标签和

那么如何根据当前版本替换这个标签呢？

Answer 1

根据您的代码，我会说 Card 或 Image 组件正是您要查找的内容：

Card

Image

看起来您只需将上述示例中的 Media 重构为 Card 即可使其正常工作。

Answer 2

正如@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

Answer 3

所以这个案例的最终解决方案是这样的：

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;

如何在 react-bootstrap 2.2.3 中替换标签 <Media> 和 <Media.Body>？

how to replace tags <Media> and <Media.Body> in react-bootstrap 2.2.3?

twitter-bootstrap

reactjs

react-bootstrap