文章/答案/技术大牛

发布

社区首页 >问答首页 >Reactjs:带有reactjs的jQuery自定义内容滚动器

问Reactjs:带有reactjs的jQuery自定义内容滚动器
EN

Stack Overflow用户

提问于 2016-07-20 20:30:39

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

im尝试集成Jquery自定义滚动条插件这里的反应。这是我的密码

import $ from "jquery";
import mCustomScrollbar from 'malihu-custom-scrollbar-plugin';
.....
 componentDidMount: function() {
     // fixed sidebar
        var self = this;
        mCustomScrollbar($);
        $(ReactDom.findDOMNode(this.refs.menu_fixed)).mCustomScrollbar({
            autoHideScrollbar: true,
            theme: 'minimal',
            mouseWheel:{ preventDefault: true }
        });
        self.forceUpdate();
  },

我得到了一个错误index.jsx:51 Uncaught：(0，_malihuCustomScrollbarPlugin2.default)不是一个函数

有人能帮上忙吗谢谢

javascript

jquery

reactjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-07-21 03:14:59

这不是反应错误。这是基于你的模块加载器(webpack，我猜？)将jQuery插件视为ES2015模块。尝试导入CommonJS风格的插件。换言之，将：

import mCustomScrollbar from 'malihu-custom-scrollbar-plugin';

通过以下方式：

var mCustomScrollbar = require('malihu-custom-scrollbar-plugin');

如果这不起作用，您将需要分享更多关于模块加载器及其配置的信息。

尽管如此，正如托比所提到的，尝试将jQuery插件与React组件结合起来通常是不可靠和棘手的，所以要谨慎行事。

票数 0

Stack Overflow用户

发布于 2016-10-08 23:29:21

这里是我的解决方案，让事情在我的反应项目中发挥作用。我使用了原始的级联和缩小的文件，并创建了一个可导出的类，这样我的react组件就可以使用它。

我所做的是：

// MCustomScrollBar.js 
export default class MCustomScrollbar {

  constructor() {

  /*
      MCustomScrollbar depends on jquery mousewheel.  So I went to my browser url and typed

      http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js

      I selected all the content on the page and pasted it into my constructor() here.
  */

  /*
      I then copied all the contents of jquery.MCustomScrollbar.concat.min.js
      and pasted it into my constructor() here.
  */

  }


}

很好，现在我已经准备好在我的反应组件中使用这个了。下面是我如何使用它的一个例子

// MyHomeComponent.js
import React from 'react';
import $ from 'jquery';

export default class MyHomeComponent extends React.Component {
  componentDidMount() {
    const MCSB = require('./<path>/MCustomScrollBar');
    let mcsb = new MCSB.default();

    $("#mypage").mCustomScrollbar({theme:'dark'});

  }
  render() {
    return (<div id="mypage">Enter a lot of content here..</div>);
  }

}

编辑

虽然我粘贴了精简的代码，但您也可以粘贴原始代码。这将使它更容易，如果您打算修改插件代码。

票数 0

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

原文链接：

https://stackoverflow.com/questions/38490303

复制

相似问题

问Reactjs:带有reactjs的jQuery自定义内容滚动器
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Reactjs:带有reactjs的jQuery自定义内容滚动器EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Reactjs:带有reactjs的jQuery自定义内容滚动器
EN