0

Помогите пожалуйста решить проблему с библиотекой.

Подключаю в проект реакта библиотеку "Peppermint" в index.html, через import в компоненту не работает, библиотека в нодах есть. Проблема заключается в том, чтобы произвести инициализацию скрипта внутри компоненты при рендере. Т.е, сейчас всё работает до момента ререндера блока. Если открываю сайт на этой странице всё работает, но после перехода на другие страницы, рендер других компонент, перестаёт работать, нужно перезагружать DOM.

import React from 'react';
import c from './Category.module.css';
import Peppermint from '@seangenabe/peppermint';



const Category = (props) =>{
return(
    <div className={c.category}>

        <div className="peppermint peppermint-inactive" id="peppermint">
            <div className={c.swipe__page}><h2 className={c.title__page}>Page 1</h2></div>
            <div className={c.swipe__page}><h2 className={c.title__page}>Page 2</h2></div>
            <div className={c.swipe__page}><h2 className={c.title__page}>Page 3</h2></div>
        </div>
    </div>

    );
   }
   export default Category;

1 ответ 1

0

Решение.

class Category extends React.Component {
  papermintRef = React.createRef();
  
  // инициализация при монтировании
  componentDidMount() {
    Peppermint(this.papermintRef.current);
  }
  
  // повторная инициализация при обновлении
  componentDidUpdate() {
    Peppermint(this.papermintRef.current);
  }
  
  // отключение обновления компонента(при необходимости)
  shouldComponentUpdate() {
    return false;
  }

  render() {
    return(
      <div className={c.category}>
        <div ref={this.papermintRef} className="peppermint peppermint-inactive" id="peppermint">
          // ...
        </div>
      </div>
    );
  }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.