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"
  }
];