Question

我需要在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不是函数

我不知道该怎么办，能帮忙吗？

Answer 1

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});

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

1 个答案:

UPDATE：