在“反应式旋转木马” React中加载动态图像（使用API​​获取）

Question

我真的很喜欢“响应式旋转木马”，它非常适合我的要求。

更多详细信息： How to check if an element is visible with WebDriver

但是我意识到它提供的演示示例使用静态图像，这些图像放置在单独的“ Carousel.js”文件中。

就我而言，我想在Carousel中加载图片，这些图片是我在运行时使用API​​提取的。我对如何实现此行为一无所知。

目前，以下是我的应用的设置： 文件：Carousel.js

import React from "react";
import { Carousel } from "react-responsive-carousel";

export default () => (
  <Carousel autoPlay infiniteLoop='true'>
    <div>
      <img src="http://example.com/image/32.png" />
      <p className="legend">Image 1</p>
    </div>
    <div>
      <img src="http://example.com/image/34.png" />
      <p className="legend">Image 2</p>
    </div>
    <div>
      <img src="http://example.com/mockups/image/9.png" />
      <p className="legend">Image 3</p>
    </div>
    <div>
      <img src="http://example.com/image/32.png" />
      <p className="legend">Image 4</p>
    </div>
    <div>
      <img src="http://example.com/image/34.png" />
      <p className="legend">Image 5</p>
    </div>
  </Carousel>
);

在我的App.js文件中，我只是通过以下方式使用它：

<div>
<div className="my-carousel">
<Carousel />
</div>
</div>

Answer 1

这是一个基本流程，您可以根据需要进行调整：

1. 首先，您必须获取图像。
2. 之后，您必须将图像保持在组件的状态。
3. 最后，使用状态图像渲染<Carousel />。

这是一个伪代码：

import React from 'react'
import { Carousel } from 'react-responsive-carousel'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      images: null
    }
  }

  componentDidMount() {
    // #1. First of all you have to fetch the images.
    fetch('https://example.com/images-api-endpoint')
      .then(response => response.json()) // If it's a JSON response, you have to parse it firstly
      .then(images => this.setState({ images })) // #2. After that you have to keep the images in the component's state.
  }

  render () {
    const { images } = this.state

    if (!images) return <div>Images are not fetched yet!</div>

    // #3. Finally, render the `<Carousel />` with the state's images.
    return <Carousel autoPlay infiniteLoop='true'>
      {
        images.map( image => {
          return <div>
            <img src={ image.path } />
            <p className="legend">{ image.name }</p>
          </div>
        })
      }
    </Carousel>
  }
}

---

请牢记上面的流程中未包含某些概念，因为它们不在问题的范围内。例如：

1. 在获取图像时显示“正在加载”指示器。
2. 如果API请求失败，则错误处理。