如何在react-image-gallery中访问slideToIndex(index)？

Question

我想通过使用renderCustomControls为react-image-gallery创建一个自定义控件，并希望能够访问slideToIndex()函数。文档中说可以通过ref来访问slideToIndex函数。是否有人知道如何做到这一点？以下是在repl.it上的示例https://repl.it/@Pyot/react-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;

- Pyot

---

你是想要构建自己的自定义控件还是只是想要样式化弹出点？ - awran5

@awran5 我试图构建自己的控件。子弹只是一个例子。 - Pyot

Answer 1

解决方案：创建 ref 并将其应用于 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}
          />
      )
    }

- Pyot