Как получить доступ к slideToIndex (index) в реакции-картинке-галерее? - PullRequest
Новая
       11

Как получить доступ к slideToIndex (index) в реакции-картинке-галерее?

0 голосов
/ 27 марта 2020

Я хочу создать собственный элемент управления для response-image-gallery с помощью renderCustomControls. Я хотел бы получить доступ к slideToIndex (). В документации сказано, что есть доступ к slideToIndex по ссылке. Кто-нибудь знает как это сделать? Вот пример для repl.it https://repl.it/@Pyot / Reaction-Image-Gallery-Custom-Controls 

import React from 'react';
import ImageGallery from "react-image-gallery";
import './App.css';

const images = [
  {
    original: 'https://picsum.photos/id/1018/1000/600/',
    thumbnail: 'https://picsum.photos/id/1018/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1015/1000/600/',
    thumbnail: 'https://picsum.photos/id/1015/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1019/1000/600/',
    thumbnail: 'https://picsum.photos/id/1019/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1018/1000/600/',
    thumbnail: 'https://picsum.photos/id/1018/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1015/1000/600/',
    thumbnail: 'https://picsum.photos/id/1015/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1019/1000/600/',
    thumbnail: 'https://picsum.photos/id/1019/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1018/1000/600/',
    thumbnail: 'https://picsum.photos/id/1018/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1015/1000/600/',
    thumbnail: 'https://picsum.photos/id/1015/250/150/',
  },
  {
    original: 'https://picsum.photos/id/1019/1000/600/',
    thumbnail: 'https://picsum.photos/id/1019/250/150/',
  },
];

const renderCustomControls = () => {

  const slideToIndex = (index) => null

  return <div className="custom-control">
          <div className="slider">
            <div className="bullet-left" onClick={slideToIndex(1)}></div>
          <div className="bullet" onClick={slideToIndex(5)}></div>
          <div className="bullet" onClick={slideToIndex(6)}></div>
          <div className="bullet" onClick={slideToIndex(7)}></div>
          <div className="bullet" onClick={slideToIndex(8)}></div>
          <div className="bullet-right" onClick={slideToIndex(10)}></div>
          </div>
        </div>
}

function App() {
  return (
    <div className="App">
    <ImageGallery
      renderCustomControls={renderCustomControls}
      items={images} />

    </div>
  );
}

export default App;

1 Ответ

0 голосов
/ 28 марта 2020

Решение: создайте ссылку и примените ее к компоненту ImageGallery. 

export default function ImageGallery(props: Props) {

      const refImg = useRef(null)

      const renderCustomControls = () => <span>refImg.current.getCurrentIndex()</span>

      return (
           <ImageGallery
            ref={refImg}
            renderCustomControls={renderCustomControls}
            items={images}
          />
      )
    }
...