为什么我的 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 $0</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;