时间戳

首页 > 解决方案 > 反应从外部脚本添加动画交互式背景

reactjs - 反应从外部脚本添加动画交互式背景

问题描述

嗨，我一直在为 React 应用程序添加动画背景，这也是交互式的。我已经查看了几个类似的问题和这个页面https://reactjs.org/docs/integrating-with-other-libraries.html但我找不到我的问题的解决方案。脚本是用 Java 编写的，并被翻译成 JavaScript，我已经购买了它。有文档，但没有提到 React。脚本的作者说他不了解 React，无法帮助我。它在普通网站上运行良好，但我想将它用于 React。

HTML 中的代码如下所示：

<script src="js/libs/jsband-min.js" type="text/javascript"></script>
    <script src="js/anim-min.js" type="text/javascript"></script>

<div id="DV_ID">
   <script type="text/javascript">
     var anim = new Anim("DIV_ID", {
      //some settings
     MOUSE_IMPACT_FACTOR: 50
     ETC...
    }
    </script>
</div>

标签： reactjsanimationbackground

解决方案

React 只是一个生成网站视图（内容）的库。您应该能够在 React 中使用您想要的库，但我认为您的问题需要更多关注/信息。虽然我会尽力帮助。

听起来需要加载这两个脚本。您是否已经确保将它们加载到您的 react 应用程序中，并通过网络工具验证两者都正在加载？如果答案是否定的，这篇文章可能会有所帮助：

https://medium.com/better-programming/4-ways-of-adding-external-js-files-in-reactjs-823f85de3668

一旦你确定这两个脚本都被你的 react 应用程序加载了，你应该询问谁制作了你正在使用的库，它是如何工作的/选择元素来注入背景。作为一个疯狂的猜测，我猜这DIV_ID是注入背景的元素的 ID。您是否已经确保该元素在代码运行时存在？您可以通过调试代码并document.getElementById在控制台中使用该 ID 运行并验证它是否存在来验证这一点。如果不是，这可能是另一个原因。

最后可能是元素可能存在，但它可能没有维度。您可能可以使用 DOM 检查器来解决这个问题。

总的来说，我建议您在下一个问题之前阅读发布指南，因为这个问题缺少很多人们需要帮助您的东西： https ://stackoverflow.com/help/how-to-ask

推荐阅读