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 및 파워 4가 완화 사용하는 다른 프로젝트를 가지고 있고, 나는 이런 식으로 그것을 사용 :

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을 사용합니다. 도움이되는지 확인하십시오.