带有React的Fullpage.js - 多次调用

时间:2017-12-18 14:08:48

标签: reactjs fullpage.js

我需要在React中实现一个网站,该网站将有两个页面,每个页面都有水平幻灯片。我检查了反应全页的不同实现,但它们似乎都不适合我需要的东西,因此我决定使用https://github.com/alvarotrigo/fullPage.js做出反应。我想多次调用它 - 在具有不同参数的两个不同组件中。因此,在每个组件中,我将此代码与不同的锚点放在一起:

componentWillMount() {
    console.log("Will ount technical");
    $(document).ready(function() {
      $.fn.fullpage.destroy('all');
      $('#fullpage').fullpage({
        anchors:['welcome', 'data'],
        lockAnchors: false,
        slidesNavigation: true
      });
    });
  }

如果我单独打开每个页面(刷新后),它们都可以工作,但如果我导航到每个页面,我会收到以下错误: fullPage:Fullpage.js只能初始化一次而你正在做多次! 我在其中一个论坛上发现可能我应该使用它:$.fn.fullpage.destroy('all'); 但它对我不起作用,如果我使用此代码我会收到错误 TypeError:$ .fn.fullpage.destroy不是函数

我不知道该怎么办,能帮忙吗?

1 个答案:

答案 0 :(得分:0)

UPDATE:

现在是fullpage.js的官方React组件:

https://github.com/alvarotrigo/react-fullpage

最简单的方法是使用不同的fullpage.js容器。 这样你就可以有条件地初始化它们:

if( $('#container1').length ){
     $('#container1').fullpage({YOUR_OPTIONS});
}

if( $('#container2').length ){
     $('#container2').fullpage({YOUR_OPTIONS});
}

否则你可以销毁任何以前使用的实例,但是你必须小心不要在第一次初始化之前调用destroy方法:

if(typeof $.fn.fullpage !== 'undefined'){
    $.fn.fullpage.destroy('all');
}
$('#fullpage').fullpage({YOUR_OPTIONS});