带有React 17的机车卷轴

Question

我正在尝试在React 17中使用Locomotive Scroll，我不知道如何正确设置组件才能正常工作。我找到的所有示例都是针对React的旧版本，我不理解。

有谁知道怎么让它工作吗？

我认为它应该看起来像这样：

import React from "react"
import LocomotiveScroll from "locomotive-scroll"


const ComponentName = () => {

 //some code here

  return (
      <div data-scroll-container>
        <section data-scroll-section>
          <h1 data-scroll>Hey, there!</h1>
          <p
            role="img"
            aria-label=""
            data-scroll
            data-scroll-direction="horizontal"
            data-scroll-speed="3"
          >
            ?
          </p>
        </section>
        <section data-scroll-section>
          <h2 data-scroll data-scroll-speed="1">
            What's up?
          </h2>
          <p data-scroll role="img" aria-label="">
            ?
          </p>
        </section>
      </div>
    );
  }

export default ComponentName

Answer 1

您一定要做的是创建一个实例：https://github.com/locomotivemtl/locomotive-scroll#with-a-bundler

Answer 2

您应该在useEffect中使用它，如下例所示。您可以尝试通过直接获取类或使用useRef来使用它。试着看看下面的例子。

    import LocomotiveScroll from 'locomotive-scroll';
    import { useEffect, useRef } from 'react';
    
    export default function Home() {
    
       let container = useRef(null);
    
       useEffect(() => {
          
          new LocomotiveScroll({
             el: container,
             smooth: true,
             lerp: .06,
             multiplier: .5
          });
    
       }, []);
    
       return (               
          <div ref={el => container = el} className="container">
             <div data-scroll data-scroll-speed="1">
               //Code here
             </div>
          </div>
       )
    }