文章/答案/技术大牛

发布

问jQuery没有在反应中工作
EN

Stack Overflow用户

提问于 2017-11-02 14:56:38

回答 1查看 13.2K关注 0票数 2

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

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

如果我在浏览器的控制台滑块中运行$("#scroller").simplyScroll();，那么即使返回到当前页面，它也能正常工作。有人能帮我或建议更好的方式实施在反应。

jquery

reactjs

回答 1

Stack Overflow用户

发布于 2017-11-02 15:02:42

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

这里的诀窍是，在您的React组件完成安装后，在中执行。所以，试一试吧：

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

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

import $ from 'jquery';

示例

只是一个关于如何将jQuery集成到您的React组件中的一般示例。这里，我们将内部文本"foo“添加到我们的#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>

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47078329

复制

相似问题

问jQuery没有在反应中工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery没有在反应中工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery没有在反应中工作
EN