在 'react-responsive-carousel' React 中加载动态图像（使用 API 获取）

Question

我很喜欢'react-responsive-carousel'，它完全符合我的要求。

更多详情： https://www.npmjs.com/package/react-responsive-carousel

但是我意识到这个提供的演示示例使用静态图像，放在单独的 "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

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

首先你必须获取图像。
之后，您必须将图像保持在组件状态。
最后，使用州图像渲染 <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>
  }
}

请记住，上面的流程中没有包含一些概念，因为它们超出了问题的范围。例如：

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

在 'react-responsive-carousel' React 中加载动态图像（使用 API 获取）

Loading dynamic images (fetched using API) in 'react-responsive-carousel' React

image

carousel

reactjs

responsive

react-responsive-carousel