[英]Initializing PerfectScrollbar in React app
I was using the old version of perfect-scrollbar
in my React
app.我在我的
React
应用程序中使用旧版本的perfect-scrollbar
。 In the old version, there was an ps.initialize()
method that I was using with a ref
to the section that I wanted to use perfect scrollbar for.在旧版本中,我使用了一个
ps.initialize()
方法,并ref
了我想为其使用完美滚动条的部分。
I tried the new approach -- see below -- but perfect scrollbar doesn't seem to be initializing.我尝试了新方法——见下文——但完美的滚动条似乎没有初始化。
import PerfectScrollbar from 'perfect-scrollbar';
class MyComponent extends Component {
componentDidMount() {
const sb1 = new PerfectScrollbar(this.refs.ref1);
const sb2 = new PerfectScrollbar(this.refs.ref2);
sb1.update();
sb2.update();
}
render() {
return(
<div ref="ref1">
Section 1
</div>
<div ref="ref2">
Section 2
</div>
);
}
}
export default MyComponent;
What's the right way to use perfect scrollbar in a React
app?在
React
应用程序中使用完美滚动条的正确方法是什么? BTW, there's a React Wrapper for perfect scrollbar but it hasn't been updated for a while and this newly updated version of perfect-scrollbar
has addressed some of the issues of the old one so I'd really like to use this one.顺便说一句,有一个用于完美滚动条的React Wrapper ,但它已经有一段时间没有更新了,这个新更新的
perfect-scrollbar
版本已经解决了旧版本的一些问题,所以我真的很想使用这个。 I'd appreciate some pointers here.我会很感激这里的一些指示。 Thanks.
谢谢。
basically reading the documentation you can see the following:基本上阅读文档你可以看到以下内容:
to initialize:初始化:
const ps = new PerfectScrollbar('#container');
therefore you can change your code to the following:因此您可以将代码更改为以下内容:
import PerfectScrollbar from 'perfect-scrollbar';
class MyComponent extends Component {
componentDidMount() {
const parent = new PerfectScrollbar('.parent');
const sb1 = new PerfectScrollbar('.sb1');
const sb2 = new PerfectScrollbar('.sb2');
parent.update();
sb1.update();
sb2.update();
}
render() {
return(
<div className="parent">
<div className="sb1" ref="ref1">
Section 1
</div>
<div className="sb2" ref="ref2">
Section 2
</div>
</div>
);
}
}
export default MyComponent;
also it would be easy to use the wrapper that you mention, the idea of those kind of wrappers is to aliviate those initializations.使用你提到的包装器也很容易,这些包装器的想法是减轻那些初始化。
your code would end up like this:你的代码最终会像这样:
import PerfectScrollbar from 'react-perfect-scrollbar'
class MyComponent extends Component {
render() {
return(
<PerfectScrollbar>
<div className="sb1" ref="ref1">
Section 1
</div>
<div className="sb2" ref="ref2">
Section 2
</div>
</PerfectScrollbar>
);
}
}
export default MyComponent;
note : you are not saying what version you are using, so I just assumed you were on the latest one:)注意:你没有说你使用的是什么版本,所以我只是假设你使用的是最新版本:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.