gpt4 book ai didi

javascript - 如果我想在 React 中使用像 AOS 这样的 javascript 库,该怎么做?

转载 作者:行者123 更新时间:2023-12-01 00:19:56 24 4
gpt4 key购买 nike

我想在我的 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/

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