如何使用React-Bootstrap基于项目数创建轮播项目

Question

如何循环遍历数组并根据项目数创建新的<Carousel.Item>并在其中插入<Card>组件。

比方说，我有以下带有某些图像源的阵列：

const items = [
   {
     src: 'http://somerandomimage.com'
   },
   {
     src: 'http://somerandomimage.com'
   },
   {
     src: 'http://somerandomimage.com'
   },
   {
     src: 'http://somerandomimage.com'
   }
]

我想遍历此数组并为每个<Card>添加两个<Carousel.Item>所以每个<Carousel.Item>看起来都像这样：

<Carousel.Item>
   <Row>
        <Col lg="3">
           <Card>
               <Card.Img variant="top" src={item.src}/>
                <Card.Body>
                    <Card.Title>Title</Card.Title>
                    <Card.Text>
                      Nisi voluptate ex enim eiusmod pariatur eiusmod non aute 
                      cupidatat cillum pariatur.
                    </Card.Text>
                 </Card.Body>
           </Card>
       </Col>
       <Col lg="3">
           <Card>
               <Card.Img variant="top" src={item.src}/>
                <Card.Body>
                    <Card.Title>Title</Card.Title>
                    <Card.Text>
                      Nisi voluptate ex enim eiusmod pariatur eiusmod non aute 
                      cupidatat cillum pariatur.
                    </Card.Text>
                 </Card.Body>
           </Card>
       </Col>
  </Row>  

Answer 1

首先使用数组块将数组拆分成较小的块。

Array.prototype.chunk = function(size) {
  const result = [];

  while (this.length) {
    result.push(this.splice(0, size));
  }

  return result;
};

然后映射为渲染2 <Carousel.Item>，每个都有两个项目，如下所示，数组块将返回[[{}，{}]，[{}，{}]]

{items.chunk(2).map((chunk, idx) => (
        <Carousel.Item key={idx} className={idx === 0 ? "active" : ""}>
          <Row>
            {chunk.map((item, idx2) => (
              <Col lg="3" key={idx2}>
                <Card>
                  <Card.Img variant="top" style={{width: "50px"}} src={item.src} />
                  <Card.Body>
                    <Card.Title>Title</Card.Title>
                    <Card.Text>
                      Nisi voluptate ex enim eiusmod pariatur eiusmod non aute
                      cupidatat cillum pariatur.
                    </Card.Text>
                  </Card.Body>
                </Card>
              </Col>
            ))}
          </Row>
        </Carousel.Item>
      ))}

演示https://codesandbox.io/s/spring-pine-fdtg5?file=/src/App.js