我目前正在建立一个网站,我需要建立一个旋转木马。旋转木马需要有一个"进度条"作为当前幻灯片的指示器(如这里:https://www.samsung.com/uk)。
我熟悉react-responsive-carousel,但它没有内置的功能,为进度条
我已经使用state有效地构建了一个秒表,以方便组件内的进度条。
而不是使用内置的自动播放功能,从反应-响应-旋转木马,我想有一个功能,是触发一旦间隔完成移动到下一张幻灯片。
我遇到的问题是,我不确定如何触发这个动作。我已经检查了文档,看起来我需要触发onClickNext(参见这里的第528行),但是我不知道如何做到这一点。
如果有区别的话,我目前使用的是功能组件,而不是基于类的组件。我只需要了解如何从组件中触发该操作。
感谢也许使用ref来触发该类组件内部的函数是可行的。
这似乎是你正在寻找的解决方案。
import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { useEffect, useRef } from "react";
const App = () => {
const myRef = useRef();
useEffect(() => {
setTimeout(() => {
if (myRef) myRef.current.onClickNext();
}, 2000);
}, []);
return (
<Carousel ref={myRef}>
<div>
<p>Slide 1</p>
</div>
<div>
<p>Slide 2</p>
</div>
</Carousel>
);
};
export default App;