Javascript Can'；t使用React中的按钮更改样式

我正在尝试制作一个汉堡包菜单，它将隐藏或显示指向站点中其他部分的链接，但当我尝试更改可见性时，它不起作用。有人能解释一下吗

export default function Mainpage(){
import barrinha from './menu.svg'

var visivel = {
  visibility: "hidden"
}

var clicks = false;

function arrastar_pro_lado(){ 
  clicks = !clicks
  if(clicks == false){
     visivel = {visibility: "hidden"}
  }else{
    visivel = {visibility: "visible"}
  }
}
return(
        <div>
          <button id='barrinha' onClick={arrastar_pro_lado()}><img src={barrinha}/></button>
            <div id='menu' style={visivel}>
                <a >ver perfil</a>
                <a >criar eventos</a>
                <a >consultar eventos</a>
                <a >historico de eventos</a>
                <a >Sair</a>
            </div>
);}

导出默认函数主页（）{
从“./menu.svg”导入barrinha
变量visivel={
可见性：“隐藏”
}
var=false；
函数arrastar_pro_lado（）{
点击次数=！点击次数
如果（单击==false）{
visivel={visibility:“hidden”}
}否则{
visivel={visibility:“visible”}
}
}
返回(
弗佩菲尔
重大事件
埃文托斯领事酒店
事件历史
赛尔
);}

单击后，您需要更改状态以触发重新渲染：

const-App=（）=>{
const[visible，setVisible]=React.useState（false）；
返回(
setVisible（！visible）}>
弗佩菲尔
重大事件
埃文托斯领事酒店
事件历史
赛尔
);
};
render（，document.querySelector（'.react'）
您需要一个状态变量。您可以像这样使用React钩子useState

在click处理程序中，使用状态更新程序函数调用setVisible，该函数将切换状态值

使用setState的updater函数形式很重要，因为下一个状态取决于上一个状态

简单地编写
setState（！state）
很有诱惑力，但是这可能会导致不一致的结果

而是写
setState（prevState=>！prevState）

import React，{useState}来自“React”；
从“/menu.svg”导入barrinha；
导出默认函数主页（）{
const[visible，setVisible]=useState（false）；
函数arrastar_pro_lado（）{
setVisible（（可见）=>！可见）；
}
常数visivel={
可见性：可见？“可见”：“隐藏”，
};
返回(
弗佩菲尔
重大事件
埃文托斯领事酒店
事件历史
赛尔
);
}
从“React”导入React，{useState}；
从“/menu.svg”导入barrinha；
导出默认函数主页（）{
//地方政府
常量[isMenuVisible，setIsMenuVisible]=useState（false）；
函数arrastar_pro_lado（）{
//当用户单击按钮时，更改菜单的先前状态
setIsMenuVisible（！isMenuVisible）；
}
返回(
弗佩菲尔
重大事件
埃文托斯领事酒店
事件历史
赛尔
);
}
注意，您正在立即执行函数，而不是将其设置为回调/事件侦听器，
onClick={arrastar\u pro\u lado（）}
，应该类似于
onClick={arrastar\u pro\u lado}
谢谢，但我有个问题。我应该何时使用状态以及为什么。为什么不能将值false存储在变量中？@babukinha每次React调用函数组件时，变量都会被销毁并重新创建。而是使用状态。我建议阅读有关州的文件@babukinha我还有一个链接要读：UseStateHook。
import React, { useState } from 'react';
import barrinha from './menu.svg';

export default function Mainpage () {
  // local state
  const [isMenuVisible, setIsMenuVisible] = useState(false);

  function arrastar_pro_lado () {
    // when user click on button, change the previous status of Menu
    setIsMenuVisible(!isMenuVisible);
  }

  return (
    <div>
      <button id='barrinha' onClick={arrastar_pro_lado}>
        <img src={barrinha} />
      </button>
      <div id='menu' style={{ visibility: isMenuVisible ? 'hidden' : 'visible' }}>
        <a>ver perfil</a>
        <a>criar eventos</a>
        <a>consultar eventos</a>
        <a>historico de eventos</a>
        <a>Sair</a>
      </div>
    </div>
  );
}