React. загружать различные массивы данных в скользящий слайдер - PullRequest
Новая
       18

React. загружать различные массивы данных в скользящий слайдер

0 голосов
/ 14 апреля 2019

Итак, на этом этапе у меня есть компонент, в котором я рисую слайдер, фотографии которого представляют собой маршруты в определенные комнаты. Задача теперь состоит в том, чтобы перенести слайдер на отдельную страницу (компонент) ... которая откроет для страниц: комнаты / новости / рекламные акции, проходящие через различные массивы. Возможно ли это сделать в реакторе или это плохой случай, и эту задачу нужно решать по-другому, я даже не понимаю, как это сделать 

  <Slider ref={slider => (this.slider = slider)} {...settings}>
      {RoomsService.rooms.map(room => {
        return (
          <div className="rooms_slider">
            {room.title === 'Soon' ? (
              <img src={room.img} />
            ) : (
              <Link to={`/rooms/${room.id}`}>
                <img src={room.img} />
              </Link>
            )}

          </div>
        );
      })}

    </Slider>

1 Ответ

0 голосов
/ 14 апреля 2019

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

const CustomSlider = ({rooms, settings}) => {
  return (

    <Slider ref={slider => (this.slider = slider)} {...settings}>
      {rooms.map(room => {
        return (
          <div className="rooms_slider">
            {room.title === 'Soon' ? (
              <img src={room.img} />
            ) : (
              <Link to={`/rooms/${room.id}`}>
                <img src={room.img} />
              </Link>
            )}

          </div>
        );
      })}

    </Slider>
  )
};


<CustomSlider rooms={[{title,  img, id}]} settings={someSettingObj} />

Отсюда вы можете условно визуализировать вещи, основываясь на доступных реквизитах.

...