Загрузка динамических изображений (полученных с помощью API) в React 'react-response-carousel'
Мне очень нравится «реагирующая карусель», и она идеально соответствует моим требованиям.
Подробнее: 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>
Вызов API, получение результата (URL изображений). Но тогда я не знаю, как связать состояние / изображения с каруселью. Я тоже новичок в ReactJS. Фрагмент кода примера может мне помочь намного лучше. Спасибо за ваши комментарии
Ответы 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 не прошел.
Спасибо за ваш ответ. Позвольте мне применить это, а затем я поделюсь своим мнением. Браво!
Итак, вызовите api, получите результат, измените состояние, привяжите изображения, готово.