為什么我的 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;