有没有办法用react-bootstrap做多项目轮播？

Question

我一直在尝试使用react-bootstrap包做一个多项目轮播，并且我成功地制作了一个单项目轮播。我正在使用 Instagram API 来获取一些照片，目的是显示其中的几张，而不仅仅是一张。

我使用了在 React 文档中找到的使用受控组件来渲染图像的示例。我尝试将handleSelect函数中的selectedIndex设置为默认值3，但这不起作用。据我了解，activeIndex 控制可见幻灯片，所以...我不知道我错过了什么。这是链接： https: //react-bootstrap.github.io/components/carousel/

下面是我控制的轮播组件的一些代码：

import Carousel from 'react-bootstrap/Carousel'

export default class ControlledCarousel extends React.Component {
  constructor(props, context) {
    super(props, context);

    // this.handleSelect = this.handleSelect.bind(this);

    this.state = {
      index: 0,
      direction: null,
    };
  }

  handleSelect = (selectedIndex, e) => {
    this.setState({
      index: selectedIndex,
      direction: e.direction,
    });
  }

  render() {
    const { index, direction } = this.state;

    return (
      <Carousel
        activeIndex={index}

        direction={direction}
        onSelect={this.handleSelect}

      >

              {this.props.images.map((image) => {
                return <Carousel.Item key={image.id}>
                  <img className="d-block w-100" alt={image.tags[0]} src={image.images.standard_resolution.url} />
                </Carousel.Item>
              })}

      </Carousel>
    );
  }
}