如何在 <TinySlider></TinySlider> 上使用 .destroy()

Question

我在使用 TinySlider 时遇到问题，我想如果我可以使用 rebuild() 和 destroy() 方法，我也许可以修复 issue/bug.

但是，你到底是怎么在像这样的组件上使用 .destroy() 的？

https://github.com/ganlanyuan/tiny-slider

（我来自 jQuery，所以现在对我来说有点学习曲线）

谢谢！

我的代码：

constructor(props) {
  super(props);
  this.state = {
      profiles: [],
      isLoading: true,
      errors: null
  };
  SPComponentLoader.loadCss('//cdnjs.cloudflare.com/ajax/libs/tiny- slider/2.9.2/tiny-slider.css');
}

if (this.props.toggleInfoHeaderValue == true ) {
  return(
    <TinySlider settings={...settings}>
      {renderProfilesCarousel}
    </TinySlider>
  )
}
else {
  return (
    <div className={styles.upArrows}>
      <TinySlider settings={...settings}>
        {renderProfiles }
      </TinySlider>
    </div>
  )
}

Answer 1

您需要为滑块创建一个实例，如下所示：

  import {tns} from './src/tiny-slider.js';

  var slider = tns({
    container: '.my-slider',
    items: 3,
    slideBy: 'page',
    autoplay: true
  });

以该实例作为参考，您可以调用 destroy 函数，如下所示：slider.destroy()

如果您将 generated 传递给 child，则在某个名为 maybe destroySlider() 的函数下添加 slider.destroy()，然后通过 props 将其传递给 child。每当您想销毁滑块时，您都可以从 child 调用相同的函数。

如何在 <TinySlider></TinySlider> 上使用 .destroy()

How to use .destory() on <TinySlider></TinySlider>

javascript

reactjs

spfx