我想在我的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 中完成。
另外,您应该通过执行此defaultExport
来引用import AOS from 'aos';
来导入它
如果您使用的是类组件,则代码应该是这样。
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 仅在安装组件时运行一次,