Инициализация PerfectScrollbar в приложении React - PullRequest
Новая
       13

Инициализация PerfectScrollbar в приложении React

0 голосов
/ 21 января 2020

Я использовал старую версию perfect-scrollbar в своем приложении React. В старой версии был метод 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 устраняет некоторые проблемы старой, поэтому мне бы очень хотелось использовать это. Я был бы признателен за некоторые указания здесь. Спасибо.

1 Ответ

0 голосов
/ 21 января 2020

в основном читая документацию вы можете увидеть следующее:

для инициализации: 

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;

note : вы не говорите, какую версию вы используете, поэтому я просто предположил, что вы используете последнюю версию:)

...