如何使用React实现AOS

Question

我的 HTML 模板中有以下代码：

<div data-spy="scroll" data-target=".site-navbar-target" data-offset="300">

如何在 React 中使用 AOS 实现此功能？

当我查看AOS文档时，我看不到data-spy和data-target的选项来在react中替换它。

预先感谢您的帮助。

Answer 1

您可以按照以下步骤在 React 应用程序中实现 AOS：

1. 在你的index.js（又名app.js / main.js）中，导入这些：

    import "aos/dist/aos.css";

2. 在您的组件中，导入：

    import AOS from "aos";

3. 然后，确保从 React 导入 useEffect 并输入：

      useEffect(() => {
         AOS.init();
      }, []);

完成此操作后，aos 类应该可以正常工作。

如果有效请告诉我！

如果您需要更多信息，可以阅读这篇文章