javascript - 如何在没有点击事件的情况下使用反应状态为元素集合设置动画？

Question

我有一个这样的集合列表：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        "https://images.unsplash.com/photo...",
        "https://images.unsplash.com/photo...",
        "https://images.unsplash.com/photo...",
        "https://images.unsplash.com/photo...",
        "https://images.unsplash.com/photo...",
        "https://images.unsplash.com/photo...",
      ]
    };
  }
}

这些集合是全屏图像，我想为它们制作动画。问题是我试图在没有任何点击事件的情况下为它们设置动画（更像是一个循环），并且我希望它可以无限期地进行动画处理。

这是我到目前为止所拥有的：

  render() {

    const items = this.state.items.map((item, i) => {
      if (i === this.state.show) {
        return (
            <img src={item} alt="" className="bg" key={i}/>
        )
      } else {
        return null
      }
    });

    return (
      <div className="App">
        <div className="container">
          <div className="arrow" onClick={this.next}><ArrowLeft/></div>
          <div className="img-container">
            <ReactCSSTransitionGroup
                transitionName={this.state.slideDirection}
                transitionEnterTimeout={0}
                transitionLeaveTimeout={0}
            >
              {items}
            </ReactCSSTransitionGroup>
          </div>
          <div className="arrow" onClick={this.prev}><ArrowRight/></div>
        </div>
      </div>
    );
  }