reactjs - 将slimscroll添加到reactJS

我正在尝试将Slimscroll添加到ReactJS应用中，并且看到滚动条反映在浏览器开发工具中，但是控制台出现错误，并且UI中断。作为旁注，该应用程序编译成功。

这是我的App.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import classnames from 'classnames';
import 'jquery-slimscroll/jquery.slimscroll.min';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';


class App extends Component {
    componentDidMount() {
        $(".scroll").slimscroll({
            height: '100%'
        });
    }
    render() {
       <MuiThemeProvider muiTheme={getMuiTheme(materialUITheme)}>
            <div id="app-inner">
                ....blah blah blah....
            </div>
       </MuiThemeProvider>
    };
}

module.exports = App;

然后在index.html中将scroll类添加到<body>

我打算在其他地方使用此功能，例如滚动表或列表，因此我宁愿将slimscroll函数附加到我可以重复使用的实用程序类上（即滚动）

如下所示，slimscroll正在传递给DOM

但是UI中断了，因为ReactJS不喜欢我以某种方式使用的方法。

许多事情不起作用（例如，菜单，页面部分显示等）

如何将slimscroll添加到ReactJS。我在npm中查看了react-scrollbar，但它需要将元素包装在<ScrollBar></ScrollBar>中，但我无法对主体进行操作

最佳答案

这可能不是您问题的直接答案。但这会解决您原来的问题。 IMO：在React中使用jQuery插件不是一个好主意。但是您可以将react-scrollbar用作主要容器，而无需在向正文添加滚动条方面产生视觉上的区别。这是一个小例子。

import React from 'react';
import { render } from 'react-dom';
import { Scrollbars } from 'react-custom-scrollbars';

const App = () => (
  <Scrollbars style={{ height: "100vh" }}>
    <div style={{height:"2000px"}}/>
  </Scrollbars>
);

render(<App />, document.getElementById('root'));

另外，请确保您的HTML和正文没有空白。

html, body{
  margin: 0px;
}

工作示例：https://codesandbox.io/s/orLx4ZlL

SlimScroll

reactjs - 将slimscroll添加到reactJS