Question

在我目前的React + React-router设置中，我的组件导入了一些jQuery的东西（owl.carousel和magnific popup）

我想保持代码干净，因此外部功能存储在单独的文件中。以下代码仅在页面加载了直接URL时才起作用，并且在导航回转发应用程序时不起作用。因此$(document).ready内的所有内容都只能通过直接链接触发。

import '../jQuery/carousel.js';

$(document).ready(function(){
    $('.owl-carousel').owlCarousel({
    });

    $('.popup-gallery').magnificPopup({
    });
});

如何解决此问题？我尝试使用componentWillMount并使用一些自定义函数包装.ready（），但我无法在导入的文件中访问updateJs()

class MyComponent extends Component {
  componentWillMount() {
    updateJs();
  }
}

Answer 1

无需使用std::string来调用$(document).ready()中的jquery函数。

您可以像react一样使用componentDidMount()，以确保呈现$(document).ready()。

然后访问DOM依赖库作为局部变量以申请jQuery elemnets。下面的例子说明了这一点。

DOM

React-router：如何触发$（document）.ready（）？

1 个答案: