gpt4 book ai didi

reactjs - 如何在 React 中使用 Relax.js?

转载 作者:行者123 更新时间:2023-12-04 00:56:43 27 4
gpt4 key购买 nike

我正在尝试将 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 钩子(Hook)的代码以及整个组件的外观。这是一个非常狭隘的组件 View 。

最佳答案

你可以像这样使用它带 Hook :

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>
);
}

工作演示 (您可以滚动查看)

Edit so-rellax

关于reactjs - 如何在 React 中使用 Relax.js?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61884571/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com