0

我的 Gatsby 站点在每个页面上都使用相同的 GSAP 时间线，所以我想保持干燥，我的想法是按该顺序将我的时间线包含在我的布局组件中。

但我不知道如何使用 forwardRef 在孩子和布局之间传递我需要的参考。

简而言之，我不知道如何处理页面和布局之间的sectionsRef部分。sectionRef 取决于页面内容（子项），但在布局中的时间线中是必需的。

我如何在这两者之间共享sectionRef（我尝试了很多东西但总是导致错误）？

这是布局中没有参考的代码框： https ://codesandbox.io/s/jolly-almeida-njt2e?file=/src/pages/index.js

以及布局中带有 refs 的沙箱： https ://codesandbox.io/s/pensive-varahamihira-tc45m?file=/src/pages/index.js

这是我的文件的简化版本： Layout.js

export default function Layout({ children }) {
  const containerRef = useRef(null);
  const sectionsRef = useRef([]);
  sectionsRef.current = [];

  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    const scrollTimeline = gsap.timeline();
    scrollTimeline.to(sectionsRef.current, {
      x: () =>
        `${-(
          containerRef.current.scrollWidth -
          document.documentElement.clientWidth
        )}px`,
      ease: 'none',
      scrollTrigger: {
        trigger: containerRef.current,
        invalidateOnRefresh: true,
        scrub: 0.5,
        pin: true,
        start: () => `top top`,
        end: () =>
          `+=${
            containerRef.current.scrollWidth -
            document.documentElement.clientWidth
          }`,
      },
    });
  }, [containerRef, sectionsRef]);

  return (
    <div className="slides-container" ref={containerRef}>
      {children}
    </div>
  );
}

index.js（页面）

import { graphql } from 'gatsby';
import React, { forwardRef } from 'react';
import SectionImage from '../components/sections/SectionImage';
import SectionIntro from '../components/sections/SectionIntro';
import SectionColumns from '../components/sections/SectionColumns';

const HomePage = ({ data: { home } }, sectionsRef) => {
  const { sections } = home;

  const addToRefs = (el) => {
    if (el && !sectionsRef.current.includes(el)) {
      sectionsRef.current.push(el);
    }
  };

  return (
    <>
      {sections.map((section) => {
        if (section.__typename === 'SanitySectionIntro') {
          return (
            <SectionIntro key={section.id} section={section} ref={addToRefs} />
          );
        }
        if (section.__typename === 'SanitySectionImage') {
          return (
            <SectionImage key={section.id} section={section} ref={addToRefs} />
          );
        }
        if (section.__typename === 'SanitySectionColumns') {
          return (
            <SectionColumns
              key={section.id}
              section={section}
              ref={addToRefs}
            />
          );
        }
        return '';
      })}
    </>
  );
};

export default forwardRef(HomePage);

export const query = graphql`
  query HomeQuery {
    // ...
  }
`;

任何线索都非常感谢:)

4

0 回答 0