Файл cutom. js некорректно работает в React

Question

Я создаю приложение React, и у меня есть такие страницы, как about, home и contact. Я перемещаюсь по приложению с помощью response-router-dom. Проблема в том, что у меня есть файл custom. js, который у меня есть в папке publi c, который обрабатывает слайдер-аккордеон, который есть у меня на странице about. Вот код.

$(document).ready(function(){
initAccordions();
function initAccordions()
  {
    if($('.accordion').length)
    {
      var accs = $('.accordion');

      accs.each(function()
                {
        var acc = $(this);

        if(acc.hasClass('active'))
        {
          var panel = $(acc.next());
          var panelH = panel.prop('scrollHeight') + "px";

          if(panel.css('max-height') == "0px")
          {
            panel.css('max-height', panel.prop('scrollHeight') + "px");
          }
          else
          {
            panel.css('max-height', "0px");
          }
          $(window).trigger('resize.px.parallax');
        }

        acc.on('click', function()
               {
          if(acc.hasClass('active'))
          {
            acc.removeClass('active');
            var panel = $(acc.next());
            var panelH = panel.prop('scrollHeight') + "px";

            if(panel.css('max-height') == "0px")
            {
              panel.css('max-height', panel.prop('scrollHeight') + "px");
            }
            else
            {
              panel.css('max-height', "0px");
            }
            $(window).trigger('resize.px.parallax');
          }
          else
          {
            acc.addClass('active');
            var panel = $(acc.next());
            var panelH = panel.prop('scrollHeight') + "px";

            if(panel.css('max-height') == "0px")
            {
              panel.css('max-height', panel.prop('scrollHeight') + "px");
            }
            else
            {
              panel.css('max-height', "0px");
            }
            $(window).trigger('resize.px.parallax');
          }
        });
      });
    }
  }
})

Ползунок аккордеона работает только тогда, когда я перезагружаю страницу с информацией, но когда я перехожу в приложении на главную или любую другую страницу и возвращаюсь на страницу с информацией, ползунок аккордеона не работает , он работает только тогда, когда я перезагружаю страницу с информацией.

Answer 1

Решение состоит в том, что initAccordion должен быть реализован в React для правильной работы, но для управления dom с помощью jquery вам необходимо установить jquery

npm i --save jquery

Чтобы минимизировать определенный элемент c, вы нужно создать ссылку на этот элемент и деформировать ее с помощью $. Вот пример.

import React, {Component} from 'react';
import $ from 'jquery';

class Example extends Component{
  $(this.div).css("background-color", "red");
  render(){
    return(
      <div ref={node => this.div=node}>test</div>
    );
  }
};

export default Example;

Я думаю, что это подход к этой проблеме.