React中如何在useEffect钩子外部访问scrollTween变量？

要在useEffect外部访问scrollTween，最直接的方案是用useRef存储这个GSAP tween实例——useRef的current属性可以跨组件渲染周期保留引用，不会被局部作用域限制。

修改后的代码示例 #

import { useRef, useEffect } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

const YourComponent = () => {
  const panels = useRef([]);
  const panelsContainer = useRef();
  // 用useRef存储scrollTween实例
  const scrollTweenRef = useRef(null);

  const createPanelsRefs = (panel, index) => {
    panels.current[index] = panel;
  };

  useEffect(() => {
    const totalPanels = panels.current.length;
    if (totalPanels === 0) return; // 避免空数组导致GSAP报错

    const scrollTween = gsap.to(panels.current, {
      xPercent: -100 * (totalPanels - 1),
      ease: 'none',
      scrollTrigger: {
        trigger: panelsContainer.current,
        pin: true,
        scrub: 1.5,
        end: () => '+=' + panelsContainer.current.offsetWidth,
      },
    });

    // 将tween实例挂载到ref上
    scrollTweenRef.current = scrollTween;

    // 组件卸载时清理资源，避免内存泄漏
    return () => {
      scrollTween.kill();
      ScrollTrigger.getAll().forEach(trigger => trigger.kill());
    };
  }, []);

  // 示例：在外部函数中调用scrollTween的方法
  const handlePauseAnimation = () => {
    if (scrollTweenRef.current) {
      scrollTweenRef.current.pause();
    }
  };

  return (
    <div ref={panelsContainer}>
      {/* 这里替换成你的面板渲染逻辑 */}
      {Array.from({length: 3}).map((_, index) => (
        <div key={index} ref={el => createPanelsRefs(el, index)} className="panel">
          Panel {index + 1}
        </div>
      ))}
      <button onClick={handlePauseAnimation}>暂停滚动动画</button>
    </div>
  );
};

export default YourComponent;

核心说明 #

• scrollTweenRef是useRef实例，初始值为null，它的current属性可以存储任意值，且在组件整个生命周期内保持引用不变。
• 在useEffect内部创建完tween后，将其赋值给scrollTweenRef.current，这样外部的事件处理函数、其他钩子都能通过scrollTweenRef.current访问到这个tween实例，调用它的pause()、play()、seek()等方法。
• 必须在组件卸载时清理tween和ScrollTrigger，防止内存泄漏。

内容的提问来源于stack exchange，提问作者LearningBeNice