在 React 应用程序中初始化 PerfectScrollbar

Question

我在我的 React 应用程序中使用旧版本的 perfect-scrollbar。在旧版本中，有一个 ps.initialize() 方法，我将 ref 用于我想为其使用完美滚动条的部分。

我尝试了新方法 -- 见下文 -- 但完美滚动条似乎没有初始化。

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;

在 React 应用中使用完美滚动条的正确方法是什么？顺便说一句，有一个 React Wrapper 用于完美滚动条，但它已经有一段时间没有更新了，这个新更新的 perfect-scrollbar 版本已经解决了旧版本的一些问题，所以我真的很想用这个。我会很感激这里的一些指示。谢谢。

Answer 1

基本上阅读documentation可以看到以下内容：

初始化：

const ps = new PerfectScrollbar('#container');

因此您可以将代码更改为以下内容：

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;

使用你提到的包装器也很容易，这些包装器的想法是减轻那些初始化。

你的代码最终会像这样：

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;

注意：你没有说你使用的是什么版本，所以我只是假设你使用的是最新版本:)

在 React 应用程序中初始化 PerfectScrollbar

Initializing PerfectScrollbar in React app

javascript

reactjs

perfect-scrollbar