gpt4 book ai didi

reactjs - 添加 slimscroll 到reactJS

转载 作者:行者123 更新时间:2023-12-03 14:20:17 25 4
gpt4 key购买 nike

我正在尝试将 Slimscroll 添加到 ReactJS 应用程序,我看到滚动条反射(reflect)在浏览器开发工具中,但我在控制台中收到错误,并且 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

enter image description here

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

enter image description here

很多东西不起作用(例如菜单、页面部分显示等)

如何将 slimscroll 添加到 ReactJS。我查看了 npm 中的react-scrollbar,但它需要将元素包装在 <ScrollBar></ScrollBar> 中我不能对 body 这样做

最佳答案

这可能无法直接回答您的问题。但它会解决你原来的问题。 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

关于reactjs - 添加 slimscroll 到reactJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43964465/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com