Javascript Reactjs:带有Reactjs的jQuery自定义内容滚动条

我试图在react中集成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();
  },

我得到了这个错误索引。jsx:51 uncaughttypeerror:（0，_malihuCustomScrollbarPlugin2.default）不是一个函数

---

是否有人能帮助它工作，谢谢这不是一个错误。这是基于您的模块加载器（我猜是webpack吧？）将jQuery插件视为ES2015模块。尝试以CommonJS样式导入插件。换言之，替换：

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

与：

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

---

也就是说，如上所述，尝试将jQuery插件与React组件结合起来通常是不可靠和棘手的，因此请谨慎行事。

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

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

与：

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

---

也就是说，如前所述，尝试将jQuery插件与React组件结合起来通常是不可靠和棘手的，因此请谨慎行事。

我的解决方案是在React项目中实现这些功能。我获取了原始的连接和缩小文件，并创建了一个可导出类，以便我的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.
  */

  }


}

很好，现在我准备在我的react组件中使用它。下面是我如何使用它的一个例子

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

}

//MyHomeComponent.js
从“React”导入React；
从“jquery”导入美元；
导出默认类MyHomeComponent扩展React.Component{
componentDidMount（）{
const MCSB=require（'.//MCustomScrollBar'）；
设mcsb=new mcsb.default（）；
$（“#mypage”）.mCustomScrollbar（{主题：'dark'}）；
}
render（）{
返回（在此处输入大量内容…）；
}
}

编辑

---

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

这是我的解决方案，可以在我的react项目中使事情正常工作。我获取了原始的连接和缩小文件，并创建了一个可导出类，以便我的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.
  */

  }


}

很好，现在我准备在我的react组件中使用它。下面是我如何使用它的一个例子

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

}

//MyHomeComponent.js
从“React”导入React；
从“jquery”导入美元；
导出默认类MyHomeComponent扩展React.Component{
componentDidMount（）{
const MCSB=require（'.//MCustomScrollBar'）；
设mcsb=new mcsb.default（）；
$（“#mypage”）.mCustomScrollbar（{主题：'dark'}）；
}
render（）{
返回（在此处输入大量内容…）；
}
}

编辑

---

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

我不是React专家，但我不认为您可以将jQuery与React一起使用-React使用“虚拟DOM”，而jQuery操纵实际DOM。可能有多种方法可以将它们结合使用，但据我所知，最好使用纯React解决方案。多亏了今天，我真的很欣赏我不是React专家，但我认为你不能将jQuery与React一起使用-React使用“虚拟DOM”，而jQuery操纵实际DOM。可能有多种方法可以一起使用，但据我所知，最好使用纯React解决方案。多亏了今天，我非常欣赏Anks Andrew，常用的JS导入语法解决了我的问题Anks Andrew，常用的JS导入语法解决了我的问题