与React接口的Javascript交互

我正在尝试实现一个帮助页面，其中的问题以可折叠的格式显示，用户只能在页面上看到问题。当他们单击想要的问题时，答案显示为可展开/可折叠项

我写了html和css。在开发人员实例中（通过w3学校），一切都正常工作，但在使用React的web环境中，我遇到了问题

下面是我为Javascript提出的建议，但我认为我没有正确编写React函数，Javascript也不起作用。任何帮助都将不胜感激

// help page collapsible interface
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }

// provide collapsible interface on help page ready event
document.addEventListener('cdm-custom-page:ready', function(){
});

// and provide collapsible interface on help page update event
document.addEventListener('cdm-custom-page:update', function(){
});

// and cleanup javascript on help page leave event
document.addEventListener('cdm-custom-page:leave', function(){
});

}

//帮助页可折叠界面
var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

这是简单的html、css和javascript方法。React不以这种方式工作。首先，您需要学习React中的一些重要规则，比如不要直接修改dom元素。 意味着你不应该使用这个代码

document.addEventListener('cdm-custom-page:ready', function(){ });

document.addEventListener('cdm-custom-page:update', function(){
});

document.addEventListener('cdm-custom-page:leave', function(){
});

如果您想在react中使用可折叠的，那么我建议您使用一些好的UI库，比如Ant Design、Material UI或react Bootstrap

您可以查看AntDesign折叠
对于材质UI，请检查折叠
用于React引导签出

---

如果你想建立一个自定义的。你也可以考虑。

这里有何反应？vanilla JSThanks看起来很有资源。