向reactJS添加slimscroll

我正在尝试将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;

import React，{Component}来自'React'；
从“react dom”导入react dom；
从'react redux'导入{connect}；
从“类名称”导入类名称；
导入“jquery slimscroll/jquery.slimscroll.min”；
从“react-tap事件插件”导入injectTapEventPlugin；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“材质ui/styles/GetMuiteme”导入GetMuiteme；
类应用程序扩展组件{
componentDidMount（）{
$（“.scroll”）.slimscroll({
身高：“100%”
});
}
render（）{
……诸如此类。。。。
};
}
module.exports=App；

然后在

index.html

中，我将

scroll

类添加到

我打算在其他有溢出的地方使用它，比如滚动表格或列表，所以我宁愿将slimscroll函数附加到一个可以重用的实用程序类（即滚动）

正如您在下面看到的，slimscroll正在传递给DOM

但是UI崩溃了，因为ReactJS在某种程度上不喜欢我使用的方法

很多东西不起作用（如菜单、页面部分显示等）

---

如何将slimscroll添加到ReactJS。我在npm中查看了react scrollbar，但它需要将元素包装在

中，而我不能将其包装在正文中这可能不是对您问题的直接回答。但它会解决你原来的问题。在我看来，在React中使用jQuery插件不是一个好主意。但是，您可以将其用作主容器，而无需在正文中添加滚动条。这里有一个小例子

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'));

---

工作示例：

我也反对将jquery与react一起使用。我以前确实检查过react滚动条，但正如您的示例所示，我必须用标记包装我的正文，而我的正文在组件之外，直接在html中。事实上，我想我从来没有见过任何react应用程序在一个特定的环境中使用身体component@LOTUSMS不知道你说的是什么意思。在我的示例中，

body

仍然直接位于

html

标记中，并且我的所有react组件都位于

body

中。当我实现react滚动条时，body滚动条保持不变，并且我得到两组滚动条。一个来自身体，另一个来自包裹在身体内的容器。隐藏主体溢出，使所有溢出停止在其内部。那么让身体内部的滚动条工作的唯一方法就是给它一个固定的高度。这意味着拜拜高度100%。车太多了。必须有一个更简单的方法好吧！！！这花了我一段时间，但它只在使用您在示例中使用的确切库时起作用。所有其他自称的“最佳滚动条”都是垃圾。谢谢

html, body{
  margin: 0px;
}