Поиск динамического рендеринга массива изображений в Swiper (React), где URL равен идентификатору, указанному c для текущего слайда - PullRequest
Новая
       10

Поиск динамического рендеринга массива изображений в Swiper (React), где URL равен идентификатору, указанному c для текущего слайда

0 голосов
/ 12 апреля 2020

В настоящее время я использую Swiper изact-id-swiper, и я хотел динамически отобразить URL-адрес, чтобы URL отражал текущий слайд, на котором включен swiper (через / slideshow /: id)

Я изначально делаю GET-запрос для изображений, который возвращает массив объектов. Каждый объект в массиве выглядит следующим образом: 

urlMobile: "http: xxxxxxxx"
urlDesktop: "http: xxxxxxxxx"
type: "User"
status: 200
title: "Alfred's guidance"
artist: "Batman"
market: "5e85d672b163322c5048dab5"
contestant: "5e85d9e4309d272c9650ce45"
createdAt: "2020-04-10T08:40:45.319Z"
updatedAt: "2020-04-10T13:12:00.824Z"
statusModifiedBy: "5e85dd0e309d272c9650ce47"
id: "5e90310dfa5f8d7ddbb49e75"

Эти изображения хранятся в состоянии родительского компонента (что делает запрос GET при монтировании). Затем эти изображения передаются в состояние дочернего компонента, Slideshow, через реквизиты.

Когда в Slideshow, я просто отображаю массив объектов следующим образом: 

<Swiper {...params} >                         
this.state.images.map((image, i) => {
     <div key={i}>
      <div className="medias grid-item">
       <div className="img-wrapper">
        <img alt="narciso" src={image.urlDesktop} />
       </div>
       <div className="infos">
        <a className="cover" href="#"></a>
        <div className="img-name">{image.title}</div>
        <div className="author">{image.artist}</div>
        <div className="date">2020</div>
       </div>
      </div>
     </div>
</Swiper>

I затем хотите иметь возможность сделать URL каждого изображения равным image.id. В настоящее время мой маршрут для Swiper (который я назвал Slideshow) выглядит следующим образом: 

<Route path="slideshow/:id"}>
  <Slideshow image={this.state.imageURL} images={this.state.images} openedClass={this.state.openedClass}/>
</Route>

Одно из решений заключается в том, что в бэкэнде есть маршрут GET / pictures /: id, что означает создание GET запрос для каждого изображения. Это может привести к довольно большой обработке, и было бы лучше, если бы он мог быть отсортирован на внешнем интерфейсе. Есть ли способ не делать этого, а просто передать указанный объект c в URL? Я новичок в React, поэтому буду признателен за любую помощь

...