Question

下面是我的代码，我想放入一个for循环，并根据我的商品计数，我想创建轮播商品。

使用ngFor可以很容易地实现角度，但是我不知道如何实现反应。

<Carousel>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=First slide&bg=373940"
      alt="First slide"
    />
    <Carousel.Caption>
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=Second slide&bg=282c34"
      alt="Third slide"
    />

    <Carousel.Caption>
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img
      className="d-block w-100"
      src="holder.js/800x400?text=Third slide&bg=20232a"
      alt="Third slide"
    />

    <Carousel.Caption>
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>

Answer 1

就像Angular中的*ngFor一样，您可以使用Array.prototype.map在React中做同样的事情。

说有一个名为items的数组。

<Carousel>
  {this.items.map(item => (
  <Carousel.Item>
    <img
      className="d-block w-100"
      src={item.src}
      alt={item.alt}
    />
    <Carousel.Caption>
      <h3>{item.captionTitle}</h3>
      <p>{item.caption}</p>
    </Carousel.Caption>
  </Carousel.Item>
  )}
</Carousel>

我如何循环React Bootstrap轮播项目

1 个答案: