Javascript ReactJS onclick向另一个元素添加或删除类

我正在努力将我的普通jQuery代码转换为React JS（我是React新手）

我有以下代码：

$（“.add”）。单击（函数（）{
$（“nav”）.addClass（“显示”）；
});
$（“.remove”）。单击（函数（）{
$（“nav”）.removeClass（“显示”）；
});
$（“.toggle”）。单击（函数（）{
美元（“nav”）。切换类别（“显示”）；
});
nav{
宽度：250px；
高度：150像素；
背景：#eee；
填充：15px；
边缘顶部：15px；
}
导航显示{
背景：红色；
颜色：白色；
}

添加
去除
切换
导航菜单
使用跟踪是否显示导航的状态
在react代码中使用与状态对应的类名
React使用“className”而不是“class”，因为“class”在javascript中已经是一个保留字
你可以看看这个

函数应用程序（）{
const[show，setShow]=React.useState（）；
返回(
设置显示（真）}>
添加
设置显示（假）}>
去除
设置显示（！show）}>
切换
导航菜单
);
}
您可以将
useRef
用于
nav
并使用每个按钮的事件处理程序操作ref（访问
nav
的DOM）

从“React”导入React；
导入“/styles.css”；
导出默认函数App（）{
const navRef=React.useRef（null）；
const onAddClick=（e）=>{
navRef.current.classList.add（“show”）；
};
const onRemoveClick=（e）=>{
navRef.current.classList.remove（“show”）；
};
const onToggleClick=（e）=>{
navRef.current.classList.toggle（“显示”）；
};
返回(
添加
去除
切换
导航菜单
);
}

.App{
字体系列：无衬线；
}
导航{
宽度：250px；
高度：150像素；
背景：#eee；
填充：15px；
边缘顶部：15px；
}
导航显示{
背景：红色；
颜色：白色；
}

用于演示的Codesanbox链接


参考：





请告诉我们到目前为止您在React中尝试了什么。@SibasishMohanty已经添加了参考资料，但这对我的案例没有帮助。我提到我是新手，JS显示了一个类型错误：“无法读取null的属性'classList'”@vishnu您是否尝试过代码沙盒链接中实现的内容？@vishnu您可以通过imgur链接将代码的屏幕截图发送给我吗？error scrn.shot:@vishnu谢谢，但我指的是代码，不是错误，如果我能浏览一下代码的一部分来检查正在发生的事情是否已经有了一个类“菜单”，那么我该如何编写：
className={show？“show”：“}
（需要代码的现有类）@vishnu您可以使用模板字符串。因为类名是字符串，所以可以将它们连接起来<代码>导航菜单

@vishnu我还对代码沙盒链接进行了更改。你也可以去那里看看。这对我很有用。。我感谢你的大力支持

function App() {
  const [show, setShow] = React.useState();

  return (
    <div className="App">
      <button className="add" onClick={() => setShow(true)}>
        Add
      </button>
      <button className="remove" onClick={() => setShow(false)}>
        Remove
      </button>
      <button className="toggle" onClick={() => setShow(!show)}>
        Toggle
      </button>
      <nav className={show ? "show" : ""}>Navigation menu</nav>
    </div>
  );
}