Загрузка динамических изображений (получаемых с помощью API) в React-Response-Carousel - PullRequest
Новая
       29

Загрузка динамических изображений (получаемых с помощью API) в React-Response-Carousel

0 голосов
/ 29 ноября 2018

Мне действительно нравится «реагирующая-карусель», и она идеально соответствует моим требованиям.

Подробнее: https://www.npmjs.com/package/react-responsive-carousel

Однако я понял, что в демонстрационных примерах используются статические изображения, помещенные в отдельный файл "Carousel.js".

В моем случае я хочу загрузить изображения в Карусель, которые я загружаю с использованием 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>

1 Ответ

0 голосов
/ 29 ноября 2018

Вот базовый поток, который вы можете настроить для своих нужд:

  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.
...