如何调用 OwlCarousel 的 react 方法

Question

嗨，我使用 OwlCarousel React，我需要调用方法，但我不知道调用方法，请帮助我 https://github.com/laurenchen0631/react-owl-carousel

Answer 1

要调用 OwlCarousel 的方法，您应该将 ref 放在 react OwlCarousel 元素上并将其附加到此，然后在此调用方法，例如：export class Owldemo1 extends Component {click = ()=>{&nbsp; &nbsp; console.log(this.slider);&nbsp; &nbsp; this.slider.next(500)}render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={this.click} className="btn btn-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; salam&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OwlCarousel items={5}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;className="owl-theme"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;loop&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;nav&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;margin={10}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ref={slider => (this.slider = slider)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><img className="img" src="https://picsum.photos/seed/1/200/300"/></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><img className="img" src="https://picsum.photos/seed/2/200/300"/></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><img className="img" src="https://picsum.photos/seed/4/200/300"/></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><img className="img" src="https://picsum.photos/seed/3/200/300"/></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><img className="img" src="https://picsum.photos/seed/5/200/300"/></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><img className="img" src="https://picsum.photos/seed/6/200/300"/></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div><img className="img" src="https://picsum.photos/seed/7/200/300"/></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </OwlCarousel>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )}}

Answer 2

第 1 步 - 在您的构造函数中创建将在第 2 步中传递给 OwnCaroussel 的选项对象构造函数（）{ 超级（）;&nbsp;this.options = { onInitialized: function(){ this.carousel = this;&nbsp;} };第 2 步 - 将选项传递给 OwlCarousel，如下所示 <OwlCarousel {...this.options}>第 3 步 - 现在您可以调用轮播的任何方法 - 例如 -this.carousel.next() 或 this.carousel.prev() 等