Question

我正在使用名为Masonry的外部JavaScript库（层叠网格布局库）https://masonry.desandro.com/。

我已经使用这个库创建了一个演示页面，一切似乎都运行良好，但是一旦我将这个库合并到React应用程序中，它就无法正常工作。

脚本

  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  <!-- <script src="../src/assets/js/JQuery/masonry.js"></script> -->
  <script>
    $(window).on('load', function(){
      var $content = $('.content-container').masonry({
      // options
      itemSelector: '.masonry',
      percentPosition: true,
      singleMode: true
      });

      $content.imagesLoaded().progress( function() {
        $content.masonry('layout');
      });
      console.log('Works!')
    });
  </script>
</html>

我尝试了两种方法，添加外部JavaScript文件masonry.js并在index.html页面的脚本标记中添加代码。每当我使用外部JavaScript文件时，它根本不起作用（console.log('Works!')甚至不显示在控制台中）。但是如果我在index.html页面的Script标签中使用代码，那么如果我进行一些页面刷新并且console.log('Works!')每次都出现在控制台中，那么偶尔会使用砌体。

我不确定它是否因为Reactjs在添加外部JavaScript库/文件方面有不同的方法，但我在网上搜索了什么是在反应应用程序中设置外部JavaScript文件的正确方法，它提出了多个方法让我对女巫感到困惑是正确的/最好的。

此外，我已经在浏览器开发人员工具中检查了网络，并且外部库/ JS文件导入似乎正在加载。

请注意：.content-container子元素在Reactjs中按钮点击时更改，但在演示页面中没有。

ReactJs外部JavaScript文件不起作用

0 个答案: