如果我想在React中使用像AOS这样的javascript库，如何使用？
如果我想在React中使用像AOS这样的javascript库，如何使用？
提问于 2019-12-28 11:49:36
我想在我的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中实现这一点？
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-12-28 11:59:51
根据documentation，您将需要调用AOS.init()在您的组件中对其进行初始化。这可以在您的componentDidMount生命周期钩子中完成。
此外，您应该通过执行此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钩子只会在组件挂载时运行一次，
Stack Overflow用户
发布于 2020-06-19 23:23:40
对于functional components and hooks (useEffect)，我是这样做的：
import React, { useEffect } from "react";
import AOS from "aos";
import "aos/dist/aos.css";
function App() {
useEffect(() => {
AOS.init();
AOS.refresh();
}, []);
return (
// your components
);
}
export default App;Stack Overflow用户
发布于 2021-08-31 16:48:57
不要忘记导入'aos/dist/aos.css'；我犯了这个错误，浪费了很多时间。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59507952
复制相关文章
相似问题
腾讯云开发者
