DOM 渲染后在 React 中执行 Vanilla JS 脚本

Question

DOM 渲染后在 React 中执行 Vanilla JS 脚本

我花了 5 个小时的时间才解决这个问题，我在文件夹中的文件<script>中添加了一些标签。我希望它们在浏览器完全渲染 HTML 后执行，我知道这是一个非常基本的问题，但问题是，我正在将 HTML 模板转换为 React，并且它大量使用动画，这是我无法承受的从头开始再次写入react。这是我的代码index.htmlpublic

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Galaxy App</title>

    <!--CSS-->
    <link href="asset/css/icofont.min.css" rel="stylesheet" />
    <link href="asset/css/linearicons.min.css" rel="stylesheet" />
    <link href="asset/css/magnific-popup.min.css" rel="stylesheet" />
    <link href="asset/css/animsition.min.css" rel="stylesheet" />
    <link href="asset/css/bootstrap.min.css" rel="stylesheet" />
    <link href="asset/css/swiper.min.css" rel="stylesheet" />
    <link href="asset/css/styles.css" rel="stylesheet" />
    <link href="asset/css/main.css" rel="stylesheet" />
    <link href="asset/css/homepage.css" rel="stylesheet" />


    <!--Theme CSS-->
    <link href="asset/css/theme.css" rel="stylesheet" />
    <link href="asset/css/responsive.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

    <script src="asset/js/polyfill.min.js"></script>
    <script src="asset/js/jquery.min.js"></script>
    <script src="asset/js/jquery.viewport.min.js"></script>
    <script src="asset/js/jQuerySimpleCounter.min.js"></script>
    <script src="asset/js/jquery.magnific-popup.min.js"></script>
    <script src="asset/js/animsition.min.js"></script>
    <script src="asset/js/isotope.pkgd.min.js"></script>
    <script src="asset/js/bootstrap.bundle.min.js"></script>
    <script src="asset/js/rellax.min.js"></script>
    <script src="asset/js/swiper.min.js"></script>
    <script src="asset/js/smoothscroll.js"></script>
    <script src="asset/js/svg4everybody.legacy.min.js"></script>
    <script src="asset/js/TweenMax.min.js"></script>
    <script src="asset/js/TimelineLite.min.js"></script>
    <script src="asset/js/typed.min.js"></script>
    <script src="asset/js/vivus.min.js"></script>
    <script src="asset/js/main.js"></script>
    <!-- Theme JS -->
    <script src="asset/js/theme.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
    <script src="asset/js/cutsom.js"></script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

我通过在最后一个脚本中记录来手动检查document.getElementById()，它返回 undefined/null ，因为当时 HTML 尚未完全呈现，即使我已将脚本放在文件末尾。如果我添加setTimeout到我的脚本中，它就会起作用，并且它可以完美地捕获元素。

那么我应该怎么做才能在我的 HTML 完全渲染后才加载所有脚本。

Answer 1

Pet*_*ing 5

实现此目的的一种方法是从 React 发出事件。

将其添加到您的主要反应组件中：

useEffect(() => {
    const event = new Event('rendered')
    document.dispatchEvent(event)
}, [])

Run Code Online (Sandbox Code Playgroud)

监听页面上的事件：

<script>
    document.addEventListener('rendered', function() {
      // start animation
    }, false)
</script>

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年，10 月前
查看次数：	1190 次
最近记录：	3 年，10 月前