Реакция. js - Итерация по карточке bootstrap

Question

Я очень новичок в React. js Если у меня есть группа изображений, состоящая из 3 карт подряд, и есть три строки для отображения на картах и ​​между каждой строкой, между ними есть пространство. Мне было интересно, как перебирать изображения с кодами карты ниже bootstrap,

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