如何在 React 中使用 Relax.js？答案

【问题标题】：How do I use Rellax.js with React?如何在 React 中使用 Relax.js？
【发布时间】：2020-09-05 03:15:20
【问题描述】：

我正在尝试将 Relax.js 与 React 一起使用，但无法理解如何使用它。我只能找到https://www.npmjs.com/package/rellax#target-node。在那个链接中，他们给出了这个代码。

<div ref={ref => { this.rellaxRef = ref }}>
  I’m that default chill speed of "-2"
</div>

var rellax = new Rellax(this.rellaxRef)

我如何使用带有 React 钩子的代码以及整个组件的外观。这是一个非常狭隘的组件视图。

【问题讨论】：

标签： reactjs react-hooks parallax use-ref

【解决方案1】：

你可以像这样使用它WITH HOOKS：

import React, { useRef, useEffect } from "react";
import Rellax from "rellax";

export default function App() {
  const rellaxRef = useRef();

  useEffect(() => {
    new Rellax(".animate", { // <---- Via class name
      speed: -10,
      center: false,
      wrapper: null,
      round: true,
      vertical: true,
      horizontal: false
    });

    new Rellax(rellaxRef.current, { // <---- Via useRef element
      speed: -10,
      center: false,
      wrapper: null,
      round: true,
      vertical: true,
      horizontal: false
    });
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div ref={rellaxRef}>
        Lorem Ipsum is simply dummy text of the printing and typesetting
      </div>
      <div className="animate">I’m that default chill speed of "-2"</div>
    </div>
  );
}

WORKING DEMO（您可以滚动查看）

【讨论】：