在reactJS函数setPanel？

问题描述

所有人。

我有一个使用香草javascript的手风琴，我想用React Hooks来实现。我试图添加到jsx，但是我的方法会产生错误。

我不知道rsx如何适应香草JavaScript函数setPanel。

 func SendFiletoClient(w http.ResponseWriter,r *http.Request,file string){

    downloadBytes,err := IoUtil.ReadFile(file)
    fmt.Println("file to be sent ",file)
    if err != nil {
        fmt.Printf("unable to download the file: %v",err)
    }

    mime := http.DetectContentType(downloadBytes)
    fileSize := len(string(downloadBytes))
   fmt.Println("mime is ",mime," filesize ",fileSize)
    //Generate the server headers
    w.Header().Set("Content-Type","octet-stream")
    w.Header().Set("Content-disposition","attachment; filename="+file+"")
    w.Header().Set("Expires","0")
    w.Header().Set("Content-transfer-encoding","binary")
    w.Header().Set("Content-Length",strconv.Itoa(fileSize))
    w.Header().Set("Content-Control","private,no-transform,no-store,must-revalidate")


    
    //// force it down the client's.....
    http.ServeContent(w,r,file,time.Now(),bytes.NewReader(downloadBytes))



}

这是我的组件代码：

TypeError: panel.setPanel is not a function
HTMLButtonElement.<anonymous>
Accordion.js:12
   9 | acc[i].addEventListener("click",function() {
  10 |  this.classList.toggle("active");
  11 |  let panel = this.nextElementSibling;
> 12 |  panel.setPanel( this.nextElementSibling);
     | ^  13 |  if (panel.style.display === "block") {
  14 |      panel.style.display = "none";
  15 |  } else {

原始的原始JavaScript代码：

import React,{ useEffect} from "react";

export default function Acordeon()
{
    const setStyle= () => {
        let acc = document.getElementsByClassName("accordion");
        for (let i = 0; i < acc.length; i++)
        {
            acc[i].addEventListener("click",function() {
                this.classList.toggle("active");
                let panel = this.nextElementSibling;
                panel.setPanel( this.nextElementSibling);
                if (panel.style.display === "block") {
                    panel.style.display = "none";
                } else {
                    panel.style.display = "block";
                }
            });
        }
    }

    useEffect(()=>{
        setStyle()
    });

    return({/*HTML Code with some css classes*/}
    )
}

在我的HTML代码中，有一个带有onClick事件的按钮以显示手风琴的内容，再次单击时将其隐藏

解决方法

使用此代码可以解决问题

useEffect(() => {
    let acc = document.getElementsByClassName("accordion");
    for (let i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click",function()
        {
            this.classList.toggle("active");

            var panel = this.nextElementSibling;
            if (panel.style.display === "block")
            {
                panel.style.display = "none";
            }

            else
            {
                panel.style.display = "block";
            }
        });
    }
    
},[])