javascript - 如何在 上使用 .story()

Question

我在使用 TinySlider 时遇到问题，我想如果我可以使用重建()和销毁()方法，我也许能够修复问题/错误。

但是，你到底如何在像这样的组件上使用 .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

您需要为 slider 创建一个实例，如下所示:

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

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

以该实例作为引用，您可以调用销毁函数，如下所示:slider.destroy()

如果您将生成的内容传递给子项，则在某个名为 destroySlider() 的函数下添加 slider.destroy() ，并通过 props 将其传递给子项。每当您想要销毁 slider 时，您都可以从子级调用相同的函数。