如果我想在React中使用类似AOS的javascript库，怎么做？

xfyts7mz 于 2022-12-21 发布在 Java

关注(0)|答案(5)|浏览(216)

我想在我的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”未定义-未定义
我该如何在React中实现这一点？

JavaScript

来源：https://stackoverflow.com/questions/59507952/if-i-want-to-use-a-javascript-library-like-aos-in-react-how

5条答案

按热度按时间

h22fl7wq1#

根据documentation，你需要调用AOS.init()在你的组件中初始化它。这可以在你的componentDidMount生命周期钩子中完成。
此外，您应该通过引用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
  });
}, []);

一定要记住添加一个空数组作为dependency数组，这样useEffect钩子在安装组件时只运行一次。

赞(0）回复(0）举报 2022-12-21

g6ll5ycj2#

使用函数组件和钩子（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;

赞(0）回复(0）举报 2022-12-21

mzmfm0qo3#

不要忘记导入'aos/dist/aos.css';我犯了那个错误，浪费了很多时间.

赞(0）回复(0）举报 2022-12-21

iq0todco4#

首先导入脚本和样式表，如下所示：

import AOS from "aos";
import "aos/dist/aos.css";

然后使用useEffect初始化aos

useEffect(() => {
   AOS.init(); //You can add options as per your need inside an object
  }, []);

赞(0）回复(0）举报 2022-12-21

drkbr07n5#

在应用index.html文件中以严格模式调用init（）函数

<script>
   (function ($) {
      'use strict';
        $(function() {
         AOS.init();
        });
    })(jQuery);
</script>

赞(0）回复(0）举报 2022-12-21

我来回答

如果我想在React中使用类似AOS的javascript库，怎么做？

5条答案

相关问题

热门标签

最新问答