jQuery is not working in React

Question

I want to use simplyScroll jquery in my react app. I added its CSS and jquery file in my index.html file. I also wrote below code before ending body tag but its not working.

<script type="text/javascript">
  (function ($){
    $(function (){
      $("#scroller").simplyScroll();
    });
  })(jQuery);
</script>

If I run $("#scroller").simplyScroll(); in browser's console slider is working fine even if I go back and come to the current page its working. Can someone help me on this or suggest better way to implement in react.

Answer 1

问题是你的脚本会在你的 React 应用程序完成渲染之前执行。这意味着您的脚本将查找该#scroller节点但不会找到它，因为它尚未被 React 渲染。

这里的技巧是在你的 React 组件安装完成之后再做。所以试试这个：

componentDidMount() {
  $("#scroller").simplyScroll();
}

请记住，您可能必须通过包管理器安装 jQuery，例如 npm 或 yarn。然后您还需要将 jQuery 导入到您的组件中：

import $ from 'jquery';

例子

只是一个关于如何将 jQuery 集成到你的 React 组件中的一般示例。在这里，我们将内部文本“foo bar”添加到我们的#contentsdiv 元素中。

componentDidMount() {
  $("#scroller").simplyScroll();
}

import $ from 'jquery';