jQuery 在 React 中不工作

Question

我想在我的 React 应用程序中使用 SimplyScroll jquery。我在我的index.html 文件中添加了它的CSS 和jquery 文件。我还在结束 body 标记之前编写了下面的代码，但它不起作用。

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

如果我在浏览器的控制台中运行 $("#scroller").simplyScroll(); ，即使我返回并进入当前页面， slider 也可以正常工作。 有人可以帮助我解决这个问题，或者建议更好的方法来实现 react 。

Answer 1

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

这里的技巧是在 React 组件完成安装之后执行此操作。所以试试这个:

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

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

import $ from 'jquery';

<小时/>

示例

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

class MyApp extends React.Component {

  componentDidMount() {
    $("#contents").html("foo bar");
  }

  render() {
    return(
      <div id="contents" />
    );
  }
}
 
ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="app"></div>