- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在我的 React 应用程序中使用 JavaScript 库 AOS ( https://michalsnik.github.io/aos/ )。如何将其包含在我的 App.js 文件中?
import React from 'react';
import logo from './logo.svg';
import './App.css';
import 'aos';
function App() {
AOS.init();
return (
<div className="App">
<header className="App-header">
<img data-aos={"fade-left"} src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
AOS需要初始化,所以我觉得我需要像上面代码中那样做一些事情,但它抛出了一个错误:
编译失败./src/App.js 第 8:3 行:'AOS' 未定义 no-undef
我如何在 react 中实现这一点?
最佳答案
根据documentation ,您需要调用 AOS.init()
在组件内对其进行初始化。这可以在您的 componentDidMount
生命周期 Hook 中完成。
此外,您应该通过执行此 import AOS from 'aos';
defaultExport
来导入它
如果您使用类组件,那么您的代码应如下所示。
import AOS from 'aos';
componentDidMount() {
// or simply just AOS.init();
AOS.init({
// initialise with other settings
duration : 2000
});
}
另一方面,对于功能组件来说,
useEffect(() => {
AOS.init({
duration : 2000
});
}, []);
请记住添加一个空数组作为依赖项数组,这样 useEffect
钩子(Hook)只会在组件安装时运行一次,
关于javascript - 如果我想在 React 中使用像 AOS 这样的 javascript 库,该怎么做?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59507952/
我正在尝试将 iOS 设备名称连同 deviceToken 一起发送到我在 didRegisterForRemoteNotificationsWithDeviceToken 中的服务器。我的设备中有一
那些在人工智能(或同等)领域工作过或工作过的人应该对 AO* 算法非常了解。 很明显它是一个通用算法。 你们中有人遇到过 AO* 算法的任何实际应用吗?你们中的一些人可能已经使用过它。 因此,如果您能
我注意到在实现搜索算法时会使用一些数据结构。比如我们用queue来实现BFS,用stack来实现DFS,用min-heap来实现A*算法。在这些情况下,我们不需要显式构造搜索树。 但是我找不到一个简单
JavaScript的执行过程 前言 编写一段JavaScript代码,它是如何执行的呢?简单来说,JS引擎在执行JavaScript代码的过程中需要先解析再执行。那么在解析阶段JS引擎又会进行哪些操
首次加载此页面时,AOS 运行良好。每个“白色方块”动画同时触发并且所有 6 个方块都可见。但是,我注意到,当我将浏览器调整为较小的大小,然后将其重新调整为较大的大小时,AOS 与我设置的媒体查询相结
通常在 HTML 文件中我像这样使用 AOS 我尝试以不同的方式在 CSS 文件中使用 AOS 和伪元素,但我没有这样做。你知道我该怎么做吗?感谢您的帮助 &::before {
我正在使用 AOS 库(css 和 js)它帮助我创建每次用户向下滚动页面时触发的动画。我有一个问题,我的页面的顶部元素只运行一次,因为 AOS 只在向下滚动时触发它。我希望我所有的动画运行 evry
我是 GatsbyJS 和 ReactJS 的新手,在构建项目时遇到问题。问题是每当我在其中构建带有 AOS 的项目时,它都会显示错误窗口未定义。当我在开发模式下运行时完全没问题。 这是我的代码: 我
在使用 OpenApi 规范的 swagger 文档中,您可以将 schema 包装在参数中以包含 application/json 的内容: parameters: - in: query
我在Android OS v4.x(尤其是4.0.3)上遇到一个问题,即在滚动时更改ListView的数据-发生崩溃是因为我试图更改的不是主UI线程的数据,这是不正确的: E/AndroidR
我在 PostgreSQL 中有这个选择: SELECT "field_1", "field_2","field_3", MIN(COALESCE(NULLIF("field_4",'') ,'TBD
我正在使用 AOS 库制作动画。当我使用动画向左和向右滑动时,页面的宽度变得比主体宽度更宽,使整个页面看起来很奇怪。我无法在网上找到任何解决方案,我想出的唯一解决方案是,如果我给应用动画的元素以 px
这又是一个极其简单的问题。只是我,还是 AOS.js 只适用于 div? 因为在下面的链接中,我在 h1 上尝试它,但它不起作用。我在 div 上试了一下,它起作用了。这是一个更大问题的一部分,该元素
假设我有一个使用结构数组 (AoS) 内存布局的大代码。我想用 C++ 构建一个零成本的抽象,它允许我以尽可能少的重构工作在 AoS 和 SoA 之间切换。 例如,使用具有访问成员函数的类 stru
我有一个窗口弹出类,它在 aos 2.x(如 2.2.2、2.3.5 等)中运行良好,但在 aos 4.x 中崩溃。导致崩溃的代码如下: public void dismissPopup(){
我正在尝试添加属性以通过 javascript 启动 AOS 动画,但它无法正常工作。现在,通过js添加属性,当动画启动时,不是显示元素,而是隐藏它。我想可能是因为元素先渲染,js在添加AOS属性后才
我正在尝试将 Michalsnik 的 Animate On Scroll 插件实现到我的 WordPress 网站中。但是,当我按照指示使用“data-aos”制作以下 div 时,该元素变成空白而
我正在使用fullpagejs和 AOS使一些 div 在滚动时从页面底部弹出(或者至少这是我想要实现的)。 不幸的是,它不起作用。 是的,我已阅读 FAQ全页的部分,是的,scrollbar 设置为
我使用FullPage用于在部分之间进行动画滚动。 我想让项目显示为 aos.js但是当 fullPage.js 工作时 aos 不起作用。 最佳答案 详情请参阅 the fullPage.js FA
我将 AOS(滚动动画)库与 vue 一起使用。 AOS提供自定义JS事件:document.addEventListener('aos:in', ({ detail }) => { console.
我是一名优秀的程序员,十分优秀!