如何使用 React-Bootstrap 根据项目数创建轮播项目答案

【问题标题】：How to create carousel items based on item count using React-Bootstrap如何使用 React-Bootstrap 根据项目数创建轮播项目
【发布时间】：2020-05-31 16:01:56
【问题描述】：

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

假设我有以下包含一些图像源的数组：

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

我想映射这个数组并为每个<Carousel.Item> 添加两个<Card> 所以每个<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>

【问题讨论】：

看起来您已经解决了自己的问题：只需执行items.map(item => JSX)，其中JSX 是您在上面为您想要的而写的。您只需为每个 Carousel.Item 添加一个 key 并将该表达式放在您的另一个 JSX 中的大括号内，以便一切正常工作。
这样做我将为数组中的每个项目创建一个新的。我想为数组中的每两个项目创建一个新的。 @Prem 回答解决了我的问题。感谢您的帮助。

标签： javascript node.js reactjs react-bootstrap mern

【解决方案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

【讨论】：