Greensock Tweenliteを使ってReactをスクロールする

Question

私はTweenliteを使いこなそうとしていますが、それは簡単だと読んでいますが、私にとってはそうではありません。 index.jsからtoScrollという関数をナビゲーションバーに渡して、onClickで呼び出されたときにスクロールしたいidを渡そうとしています。もし誰かが私を助けることができたら、私は大変に感謝します。関数がナビゲーションバーに到達していますが、エラーが発生します。

これは私が取得していますエラーです：

bundle.js:160 Uncaught TypeError: _gsap2.default.to is not a function 
at App.toScroll (bundle.js:160) 
at onClick (bundle.js:20987) 
at Object.ReactErrorUtils.invokeGuardedCallback (bundle.js:4679) 
at executeDispatch (bundle.js:4479) 
at Object.executeDispatchesInOrder (bundle.js:4502) 
at executeDispatchesAndRelease (bundle.js:3932) 
at executeDispatchesAndReleaseTopLevel (bundle.js:3943) 
at Array.forEach (<anonymous>) 
at forEachAccumulated (bundle.js:4779) 
at Object.processEventQueue (bundle.js:4148) 

Index.js：

class App extends Component { 
    constructor(props) { 
    super(props); 

    this.toScroll = this.toScroll.bind(this); 
    } 

    toScroll(location) { 
    console.log(location) 
    TweenLite.to(window, .8, {scrollTo: location}); 
    } 

    render() { 
    return (
     <div> 
     <Header toScroll={this.toScroll} /> 
     <Intro id="intro" /> 
     <WhatIDo id="what" /> 
     <WhoIAm id="who" /> 
     <Gallery id="gallery" /> 
     <Contact id="contact" /> 
     <Footer /> 
     </div> 
    ); 
    } 
} 

header.js（ナビゲーションバー）

const header = (props) => { 
    console.log(props.toScroll); 
    return (
    <HeaderContainer> 
     <HeaderName> 
     xxxx xxxxxxx 
     </HeaderName> 

     <HeaderLinks> 
     <List> 
      <Item onClick={() => props.toScroll("intro")}>Intro</Item> 
      <Item onClick={() => props.toScroll("what")}>What I do</Item> 
      <Item onClick={() => props.toScroll("who")}>Who I am</Item> 
      <Item onClick={() => props.toScroll("gallery")}>My Work</Item> 
      <Item onClick={() => props.toScroll("contact")}>Contact</Item> 
     </List> 
     </HeaderLinks> 
    </HeaderContainer> 
); 
} 

Answer 1

を誤差に基づいて、それはおそらく輸入の問題が起こっているようです。あなたのサンプルコードからGSAPをどのようにインポートするのかは不明ですが、ES6のインポートを使用していると仮定します。その場合、ES6のインポートで動作する最小限のバージョンのGSAPが1.19.0であることを思い出します。これが最初に確認する点です。私の経験からの輸入が

import TweenLite from 'gsap';

と

import scrollTo from '../node_modules/gsap/ScrollToPlugin';

のようになります（ "node_modules" パスに注意してください、私はあなたがNPMからのインストールと仮定しています）。私は緩和TweenMaxと度Power4を使用する別のプロジェクトを持っている、と私はこのようにそれを使用：

import { TweenMax, Power4 } from 'gsap'; 

export default { 
    flash(target, onComplete) { 
    return TweenMax.to(target, 0.7, { 
     backgroundColor: 'rgba(255,255,0,.3)', 
     repeat: 1, 
     repeatDelay: 1.3, 
     yoyo: true, 
     clearProps: 'backgroundColor', 
     onComplete: onComplete, 
     ease: Power4.easeInOut 
    }); 
    } 
}; 

このプロジェクトは、GSAPの1.20.3を使用しています。それが役立つかどうかを見てください。