为什么我的 javaScript 代码不能与我的反应组件一起工作？

Question

我无法将客户端 javaScript 添加到我的 React App 组件 (LeftSection.js) 中。谁能告诉我我的代码有什么问题？一个可能的答案是我在 JSX (HTML) 之前添加我的 javaScript 代码，这不允许它工作。那么，我应该把脚本放在哪里？另外，我确定我也不允许在 JSX 代码中放置标签。

代码如下：

import './LeftSection.css';
import React from 'react';

function LeftSection () {
    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";
            }
        });
    }
    
    return (
        <div className = 'left-section'>
        <div id = "tool_tree">
            
            <ul>

                <li>
                    <a className = "collapsible">CLM</a>
                    <ul className = "content">  
                        <li>
                            <a className = "collapsible">Commons</a>
                            <ul className = "content"> 
                                <li><a href="#">Workstation</a></li>
                            </ul>
                        </li>
                        
                        <li>
                            <a className = "collapsible">Electrical Characterization</a>
                            <ul className = "content">
                                <li><a href="#">ECL: 4294A Precision Impedance Analyzer</a></li>
                                <li><a href="#">ECL: Cascade 1200 (room temp)</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>

            </ul>
        </div>
        </div>
    );
};

export default LeftSection;

非常感谢您的帮助！ 谢谢

编辑（针对我面临的后续问题）：

import './LeftSection.css';
import React, { useState } from 'react';


function LeftSection () {
    const [show, setShow] = useState(false);
    
    return (
        <div className = 'left-section'>
        <div id = "tool_tree">
            
            <ul>
                <li>
                    <a className = "collapsible" onClick={() => setShow(!show)}>CLM</a>
                    {show && (
                    <ul className = "content">  
                        <li>
                            <a className = "collapsible"> Commons</a>
                            <ul className = "content"> 
                                <li><a href="#">MCL Commons Imaging Workstation</a></li>
                            </ul>
                        </li>
                        
                        <li>
                            <a className = "collapsible">Electrical Characterization</a>
                            <ul className = "content">
                                <li><a href="#">ECL: 4294A Precision Impedance Analyzer</a></li>
                                <li><a href="#">ECL: Cascade 1200 (room temp)</a></li>
                                <li><a href="#">ECL: Ecopia HMS-3000 Hall Measurement</a></li>

                            </ul>
                        </li>
                        <li>
                            <a className = "collapsible">Electron Microscopy</a>
                            <ul className = "content">
                                <li><a href="#">EPMA: CAMECA SXFive</a></li>
                                <li><a href="#">ESEM: Q250</a></li>
                                <li><a href="#">EXpressLO LLC Station [=12=]</a></li>
                            </ul>
                        </li>
                    </ul>
                    )}
                </li>
                






                <li>
                    <a className = "collapsible" onClick={() => setShow(!show)}> 2DC </a>
                    {show && (
                    <ul className = "content">  
                        <li>
                            <a className = "collapsible">Commons</a>
                            <ul className = "content"> 
                                <li><a href="#">MCL Commons Imaging Workstation</a></li>
                            </ul>
                        </li>
                        <li>
                             <a className = "collapsible">Electrical Characterization</a> 
                            <ul className = "content">
                                <li><a href="#">ECL: Poling</a></li>
                                <li><a href="#">ECL: Seebeck</a></li>
                                <li><a href="#">ECL: Sonelastic</a></li>
                                
                            </ul>
                        </li>
                    </ul>
                    )}
                </li>






                <li>
                    <a className = "collapsible" onClick={() => setShow(!show)}> Nanofab </a>                        
                    {show && (
                    <ul className = "content">  
                        <li>
                        <a className = "collapsible">Commons</a>
                            <ul className = "content"> 
                                <li><a href="#">MCL Commons Imaging Workstation</a></li>
                            </ul>
                        </li>
                        <li>
                        <a className = "collapsible">Electrical Characterization</a> 
                            <ul className = "content">
                                <li><a href="#">ECL: Poling</a></li>
                                <li><a href="#">ECL: Seebeck</a></li>
                            </ul>
                        </li>
                    </ul>
                    )}
                </li>
            </ul>
        </div>
    </div>

    );
    
};


export default LeftSection;

Answer 1

我在在线编辑器中添加了代码（没有样式）并且它正在运行。你能更准确地回答你的问题吗？ 同样在 React 中，你不应该像在 Javascript 中那样从 dom 中获取元素，因为它取消了 React 为虚拟 DOM 带来的所有优势。 请查看有关将事件处理程序传递给组件的 React 文档： https://reactjs.org/docs/faq-functions.html#how-do-i-pass-an-event-handler-like-onclick-to-a-component

这里还有一个添加 onClick 事件的简单钩子示例： https://reactjs.org/docs/hooks-state.html

您应该将 onClick 事件添加到 jsx 中的相应元素，然后在您在同一组件中声明的函数中处理它。

import React, { useState } from "react";

function LeftSection() {
  const [show, setShow] = useState(false);

  return (
    <div className="left-section">
      <ul>
        <li>
          <a>CLM</a>
          <ul>
            <li>
              <a onClick={() => setShow(!show)}>Commons</a>
              {show && (
                <ul className="content">
                  <li>
                    <a href="#">Workstation</a>
                  </li>
                </ul>
              )}
            </li>
          </ul>
        </li>
      </ul>
    </div>
  );
}

export default LeftSection;