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

Question

我如何遍历数组并根据项目计数创建新的 <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>

Answer 1

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

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

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

  return result;
};

然后将其映射到渲染 2 <Carousel.Item>，每个项目有两个项目，如下所示，数组块将 return [[{},{}], [{},{}]]

{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

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

How to create carousel items based on item count using React-Bootstrap

javascript

node.js

reactjs

react-bootstrap

mern