React State Hook - переключать класс - PullRequest
Новая
       8

React State Hook - переключать класс

0 голосов
/ 09 апреля 2019

Я пытаюсь создать навигационное меню боковой панели и подумал, что воспользуюсь новым хуком State в React.Я прочитал документы, но не могу найти пример, похожий на тот, который мне нужен, который заключается в простом переключении класса CSS при нажатии, который, в свою очередь, открывает и закрывает мое меню.

Вот чтоЯ пробовал: 

const SidebarMenuItem = ({ component }) => {
  const [ menuActive, setMenuState ] = useState(false);

  return (
    <li className="p-sidebar-menu-item">
      menuActive:
      { menuActive }
      <button className="p-sidebar-menu-item__link" onClick={() => setMenuState(!menuActive)}>{ component.component }</button>
      { component.children && (
        <ul className="p-sidebar-menu">
          <li><a href={`/${component.slug}`}>Overview</a></li>
          { component.children.map((subPage, key) => (
            <li key={ key }>
              <a href={`/${subPage.slug}`}>{ subPage.name }</a>
            </li>
          ))}
        </ul>
      )}
    </li>
  )
}

export default SidebarMenuItem;

Есть идеи, где я ошибаюсь?

Спасибо

Ответы [ 3 ]

2 голосов
/ 09 апреля 2019

Просто сделайте className динамическим, поэтому вместо установки 

<li className="p-sidebar-menu-item">

преобразуйте его в литерал шаблона 

<li className={`p-sidebar-menu-item`}>

, а затем добавьте свой класс условно ("желтый" класс вмой пример) 

<li className={`p-sidebar-menu-item ${menuActive ? "yellow" : ""}`}>

Взгляните на этот CodeSandbox : здесь я только что добавил ваш компонент и изменил способ генерирования атрибута className.

Если вы хотите избежать использования троичного оператора, вы можете использовать модуль classnames , а затем обновить свой код до 

import c from "classnames";
...
...
...
<li className={c("p-sidebar-menu-item", {yellow: menuActive})}>

Другим чистым решением может быть генерация строки className заранее, дляпример 

let classes = "p-sidebar-menu-item";
if(menuActive) {
  classes += " yellow";
}
<li className={classes}>

Дайте мне знать, если вам нужна дополнительная помощь ?

0 голосов
/ 10 апреля 2019

Не забудьте использовать prevState, иначе у вас может быть ошибка. 

<button
  className="p-sidebar-menu-item__link"
  onClick={() => setMenuState((prevMenuActive) => !prevMenuActive)}>
{component.component}
</button>
0 голосов
/ 09 апреля 2019

Я думаю, вам просто нужно 

const [ menuActive, setMenuState ] = useState(false);

также измените имя setState на setMenuState в вашем коде

...