Как при рендере инициализировать скрипт в React?

Question

[Alfieros]

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

import React from 'react';
import c from './Category.module.css';
import Peppermint from '@seangenabe/peppermint';
 // При вызове из компоненты пишет: 'Peppermint' is defined but never used  no-unused-vars, но не знаю как сделать инициализацию.



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}>Filter</h2></div>
            <div className={c.swipe__page}><h2 className={c.title__page}>Category</h2></div>
            <div className={c.swipe__page}><h2 className={c.title__page}>Another Page</h2></div>
        </div>
    </div>

    );
   }
   export default Category;

Если нельзя его вызвать как модуль, возможно как-то вызывать эту функцию внутри компоненты? Инициализация через JS

var slider = Peppermint(document.getElementById('peppermint'));

Идеи кончились, в гугле ответа не нашел. Помогите с решением пожалуйста.

Answer 1

[Антон Спирин]

Используйте методы жизненного цикла:
componentDidMount для инициализации,
componentDidUpdate для повторной инициализации,
shouldComponentUpdate для препятствия ненужным перерисовкам.

Comments

[Alfieros]

Подскажите пожалуйста, как это правильно записать в компоненту?

[Антон Спирин]

Alfieros,

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">
          // ...
        </div>
      </div>
    );
  }
}

Component lifecycle

[Alfieros]

Антон Спирин, большое Вам человеческое спасибо)

Answer 2

[Алексей Николаев]

Очевидно, что она инициализируется с привязкой к конкретным элементам DOM. Решение проще пареной репы, производите реинициализацию при каждом рендере.

Comments

[Алексей Николаев]

Alfieros, все записывается