reactjs - 如何在 React 中使用 Relax.js?
问题描述
我正在尝试将 Relax.js 与 React 一起使用,但无法理解如何使用它。我能找到的只是https://www.npmjs.com/package/relax#target-node。在那个链接中,他们给出了这个代码。
<div ref={ref => { this.rellaxRef = ref }}>
I’m that default chill speed of "-2"
</div>
var rellax = new Rellax(this.rellaxRef)
我如何使用带有 React 钩子的代码以及整个组件的外观。这是组件的一个非常狭窄的视图。
解决方案
你可以用这样的东西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(您可以滚动查看)
推荐阅读
- css - CRA:`react-scripts` 更新从 3 -> 4 中断内联 CSS 样式用法
- qt - 将 qt5 应用程序字体重置为合理的默认值
- amazon-web-services - (AWS) CloudFormation 堆栈与 Amazon Linux 2
- java - java中的材质按钮?
- c# - 为什么我的 IOCompetionCallback 从未在我的 IO 完成端口上执行?
- javascript - 反向事件监听器
- reactjs - Storybook 无法读取未定义的属性“displayName”
- python - OperationalError: (pymysql.err.OperationalError) (1129, "IP' 由于许多连接错误而被阻止;使用 'mysqladmin flush-hosts' 解除阻止")
- rust - Serde-yaml 结构列表
- android - currentBackStackEntry?.savedStateHandle?.getLiveData 在尝试向后移动数据时未收到有关更改的通知