Javascript 如何在DOM中循环并在单击ID时查找相应的类并在React中切换？

我是新来的反应者，来自jQuery。我有以下代码。我被困在如何循环浏览我的菜单中，当单击id为

#vans by manufacturer

的元素时，找到具有相同类名

.vans by manufacturer

的元素，并在其上切换

。打开
类

const Nav = (props) => {
return (
<NavContainer className={props.open ? 'open' : ''}>
  <button className='close-menu' onClick={props.close}>close</button>
  <ul>
    <li><Link href='/'>Offers</Link></li>
    <li>
      <Link href='/'>Vans &rsaquo;</Link>
      <div className='menu-secondary-container'>
        <ul className='menu-secondary'>
          <li className='title'>
            <button type='button'>Vans</button>
          </li>
          <li className="home">
            <Link href="/van-leasing.html">Vans Home</Link>
          </li>
          <li className='has-tertiary'>
            <button type='button' 
              id='vans-by-manufacturer'>Vans By Manufacturer</button>
          </li>
          </ul>
          <ul className='menu-tertiary vans-by-manufacturer'>
            <li className='title'>
              <button type='button'>&lsaquo; Vans By Manufacturer</button>
            </li>
            <li>
              <Link href="/">Ford</Link>
            </li>
            <li>
              <Link href="/">Vauxhall</Link>
            </li>
          </ul>
      </div>
    </li>
    <li><Link href='/'>Pickups</Link></li>
    <li><Link href='/'>Cars</Link></li>
  </ul>
</NavContainer>
    )} export default Nav

const导航=（道具）=>{
返回(
关闭

提议

货车&rsaquo；


货车


万斯之家酒店


货车制造商




&lsaquo；制造商提供的货车


河流浅水处


沃克斯霍尔



皮卡
汽车

)}导出默认导航

提前感谢
查看useRef react hook。
在带有“.vans by manufacturer”的元素上添加参考。
在#vans by manufacturer上添加一个onClick侦听器，单击该侦听器时，使用“.vans by manufacturer”上的“ref”来切换“open”类。
您好，请参考我的代码，并告诉我这是否有效