React.js - 遍历卡引导

Question

我对 React.js 很陌生，如果我有一组图像，连续 3 张卡片，卡片上显示三行，每行之间有空格。 我想知道如何使用以下卡片引导代码遍历图像，

function App() {
    return (

        <Card style={ { width: "18rem" } }>
            <Card.Img variant="top" src="holder.js/100px180" />
            <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                    Some quick example text to build on the card
                    title and make up the bulk of
                    the card 's content.
                </Card.Text>
            </Card.Body>
        </Card>
    );
}

Answer 1

如果您想将多张卡片显示为列表或其他内容，您可以考虑遍历数组并呈现多张卡片，如下所示

function App() {
  return data.map((i, index) => <CardView key={index} {...i} />);
}

const CardView = ({
  title = "Default Title",
  text = "Default Text",
  imgsrc = "default_holder.js/100px180"
}) => (
  <Card style={{ width: "18rem" }}>
    <Card.Img variant="top" src={imgsrc} />
    <Card.Body>
      <Card.Title>{title}</Card.Title>
      <Card.Text>{text}</Card.Text>
    </Card.Body>
  </Card>
);
const data = [
  {
    title: "First Title",
    text: "First Text",
    imgsrc: "firstimg.jpg"
  },
  {
    title: "second Title",
    text: "second Text",
    imgsrc: "secondimg.jpg"
  },
  {
    title: "third Title",
    text: "third Text",
    imgsrc: "thirdimg.jpg"
  }
];