如何访问 react-image-gallery 中的 slideToIndex(index)？答案

【问题标题】：How to access slideToIndex(index) in react-image-gallery?如何访问 react-image-gallery 中的 slideToIndex(index)？
【发布时间】：2020-07-07 23:14:03
【问题描述】：

我想通过 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;

【问题讨论】：

您是在尝试构建自己的自定义控件还是只想为项目符号设置样式？
@awran5 我尝试构建自己的控件。子弹只是一个例子。

标签： javascript reactjs ref

【解决方案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}
          />
      )
    }

【讨论】：