Fullpage.jsとReact - 複数の呼び出し

Question

私はReactで2つのページを持ち、それぞれに水平スライドがあるWebサイトを実装する必要があります。私は反応フルページの異なる実装をチェックしましたが、それらのどれも私が必要とするもののために大丈夫と思われなかったので、https://github.com/alvarotrigo/fullPage.jsを反応させることに決めました。私はそれを複数の時間 - 異なるパラメータを持つ2つの異なるコンポーネントで呼びたいと思います。だから私は別のアンカーにこのコードを置くの各コンポーネントに：

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は一度しか初期化できません。 フォーラムの1つで、これを使用する必要があるかもしれません：$.fn.fullpage.destroy('all'); このコードを使用するとエラーが発生します。TypeError：$ .fn.fullpage.destroyは関数ではありません

私は何をすべきかわかりません。どうすればよいですか？

Answer 1

最も簡単な方法は、別の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});