Question

我试着在反应中集成Jquery自定义滚动条插件here。这是我的代码

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 TypeError：（0，_malihuCustomScrollbarPlugin2.default）不是函数

有人可以帮助让它工作，谢谢

Answer 1

这不是React错误。这是基于你的模块加载器（webpack，我猜？）将jQuery插件视为ES2015模块。尝试以CommonJS样式导入插件。换句话说，替换：

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

使用：

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

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

也就是说，正如Toby所提到的，尝试将jQuery插件与React组件结合使用往往是不可靠和棘手的，所以请谨慎行事。

Answer 2

这是我在我的反应项目中开展工作的解决方案。我使用了原始的连接和缩小文件并创建了一个可导出的类，以便我的反应组件可以使用它。

这就是我的所作所为：

// 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>);
  }

}

修改

虽然我粘贴了缩小的代码，但您也可以粘贴原始代码。如果您打算修改插件代码，那将更容易。

Reactjs：带有reactjs的jQuery自定义内容滚动条

2 个答案: