Javascript cutom.js文件在React中工作不正常

我正在构建一个React应用程序，我有关于、主页和联系人等页面。我使用react router dom在应用程序中导航。问题是我在公用文件夹中有一个自定义的.js文件，用于处理“关于”页面中的手风琴滑块。 这是代码

$(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');
          }
        });
      });
    }
  }
})

---

仅当我重新加载“关于”页面时，手风琴滑块才起作用，但当我在应用程序中导航到主页或任何其他页面并返回到“关于”页面时，手风琴滑块不起作用，它只在我重新加载about页面时起作用。

解决方案是，应该在React中实现initAccordion，以便正常工作，但要使用jquery操作dom，必须安装jquery

npm i --save jquery

若要删除特定元素，需要创建对该元素的引用，并使用$将其扭曲。这里有一个例子

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;

import React，{Component}来自'React'；
从“jquery”导入美元；
类示例扩展组件{
$（this.div）.css（“背景色”、“红色”）；
render（）{
返回(
this.div=node}>test
);
}
};
导出默认示例；

---

我认为这就是解决这个问题的方法。

这个jquery对象是否指向react组件<代码>var accs=$（'.accordion'）因为react可能已将其从DOM中删除，然后在返回时添加一个新实例。很难混合使用JQuery和react。如果确实要这样做，则需要在每次装入组件时重新附加jquery，在组件的did mount生命周期方法中，yes$（'.accordion'）是react组件中带有accordion类的div。每次组件挂载时，如何在custom.js中重新附加jquery。这很糟糕，但您还记得您的：

initaccordios（）您可能需要重新设计React，因为它不允许在src目录之外进行任何导入