Пытаюсь сделать меню кнопки гамбургера. Когда я нажимаю кнопку, ничего не происходит. Если я что-то регистрирую в функции toogleHamburger, я вижу это в консоли, но стиль не меняется. Если я не использую ...

-1
hasanelmaci 19 Янв 2021 в 17:44

1 ответ

Лучший ответ

По возможности старайтесь избегать использования собственных методов DOM в React - обычно это антипаттерн. Вместо этого прикрепите слушателей внутри JSX:

  return (
    <div>
      <button className={`${styles.ham} ham`} onClick={toggleHamburger}></button>
      <nav className={`${styles.navbar} navbar`}>
      <ul>
        <li><a className={`${styles.menuLink} menuLink`} onClick={toggleHamburger} href="#">Home</a></li>
        <li><a className={`${styles.menuLink} menuLink`} onClick={toggleHamburger} href="#">Profile</a></li>
        <li><a className={`${styles.menuLink} menuLink`} onClick={toggleHamburger} href="#">About</a></li>
        <li><a className={`${styles.menuLink} menuLink`} onClick={toggleHamburger} href="#">Contacts</a></li>
    </ul>
    </nav>
    </div>
  );

Менее повторяясь, .map <li> s:

const Item = ({ menuLink, toggleHamburger, text }) => (
  <li><a className={`${menuLink} menuLink`} onClick={toggleHamburger} href="#">Home</a></li>
);
  return (
    <div>
      <button className={`${styles.ham} ham`} onClick={toggleHamburger}></button>
      <nav className={`${styles.navbar} navbar`}>
      <ul>
        {
          ['Home', 'Profile', 'About', 'Contact'].map(
            text => <li><a className={`${styles.menuLink} menuLink`} onClick={toggleHamburger} href="#">{text}</a></li>
          )
        }
    </ul>
    </nav>
    </div>
  );
0
CertainPerformance 19 Янв 2021 в 14:51