Reactjs React路由器：如何触发$（document）.ready（）？

在我当前的React+React路由器设置中，我的组件导入了一些jQuery内容（owl.carousel和放大弹出窗口）

我希望保持代码干净，因此外部特性存储在单独的文件中。下面的代码仅在页面加载了直接URL时有效，在应用程序的前后导航时无效。因此，

$（document.ready

中的所有内容都只能通过直接链接触发

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

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

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

我如何处理这个问题？我尝试将componentWillMount和wrap.ready（）与一些自定义函数一起使用，但无法访问导入文件中的

updateJs（）

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

无需使用

$（document）.ready（）

调用

react

中的jquery函数

您可以像使用

$（document）.ready（）

一样使用

componentDidMount（）

，以确保呈现

DOM

然后访问

jQuery

依赖库作为局部变量，以应用

DOM

元素。下面的例子说明了这一点

import $ from 'jquery'; //make sure you have jquery as dependency in package.json

class MyComponent extends Component {
  componentDidMount() {
    let owlCarousel = $.fn.owlCarousel; //accessing jquery function
    let magnificPopup = $.fn.magnificPopup; //accessing jquery function
    $('.owl-carousel').owlCarousel({ //call directly on mount
    });

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

---

我很感激你的回答，它当然有效。但这样代码看起来很难阅读。在实际的项目中，我想分开100行jquery和20行jsx。您知道如何从.js导出函数、导入组件并引用一个函数，如callScripts（）或refresh（）？一种方法是将

jQuery

函数分配给

window

对象，以便在

react

组件中访问。还有一件事，尝试

react

库作为

jQuery

库的替代品。