javascript - 尝试在 React 组件中实现 CSS/JavaScript 可折叠

Question

我正在尝试将此可折叠菜单实现为反应组件。我很确定我已经正确地输入了所有的 CSS，我认为问题在于 JavaScript。我对 JavaScript 的了解有点不稳定，但是在做了一些研究之后，我发现我可以使用 React Helmet 来包含脚本标签。

组件（文件摘录）

render() {
        return (
            <div>
                <Helmet>
                    <script src="reactapp\src\Scripts\Collapsible.js" type="text/javascript" />
                </Helmet>

我不认为那部分是问题。我认为问题在于 Collapsible.js。

Collapsible.js（整个文件）

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

JavaScript 直接来自 w3schools 提供的代码块。JavaScript 代码是否需要存在于被调用的函数中？

现在发生的情况是该按钮按预期显示，但单击它不会导致它展开。这是该部分以防万一。

组件续

<button type="button" className="collapsible">Heart of Algebra</button>
   <div className="content" style={{ 
       backgroundColor: "#f1f1f1", 
       paddingBottom: "150px",
       }}>

标签： javascripthtmlcssreactjsjsx