我想通过 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;
最佳答案
解决方案:创建 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}
/>
)
}
关于javascript - 如何访问 react-image-gallery 中的 slideToIndex(index)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60882203/