Реагируйте на способ открытия NavBar и нажмите кнопку

Question

Я пытаюсь найти способ открыть панель навигации приложения ReactJS, когда нажимаю кнопку "MENU".

В начале мой компонент навигации имеет width из 0px (с overflow : hidden). Когда я нажимаю на кнопку, моя навигация должна иметь width из 400px. Я новичок в React.

У меня есть два компонента React:

1. Topbar

export default function Topbar() {
    return (
        <div className="topbar__container">
            <div className='topbar__menuButton'>
                <Link className="topbar__link">MENU</Link>
            </div>
            <div className="topbar__title">
                <Link to="/" className="topbar__link">EDGAR</Link>
            </div>
        </div>
    )
}

Nav

const Nav = () => {
    return (
        <div className="navbar__container">
                <Query query={CATEGORIES_QUERY} id={null}>
                    {({ data: { categories } }) => {
                        return (
                            <nav className="nav">
                                <ul>
                                    {categories.map((category, i) => {
                                        return (
                                            <li key={category.id}>
                                                <Link to={`/category/${category.id}`} className="nav__link">
                                                    {category.name}
                                                </Link>
                                            </li>
                                        )
                                    })}
                                </ul>
                            </nav>
                        )
                    }}
                </Query>
            </div>
    )
}

export default Nav

Answer 1

Чтобы достичь чего-то подобного, вы должны установить эту логику c в общем родительском элементе обоих компонентов (здесь App для примера).

App будет управлять состоянием, чтобы определить, Nav открыт или нет. Состояние называется isMenuOpen и может быть изменено с помощью функции setIsMenuOpen(). Мы дадим детям Nav состояние isMenuOpen и детям TopBar обратный вызов из функции setIsMenuOpen():

App.jsx

import React from "react";

import TopBar from "./TopBar";
import Nav from "./Nav";

export default function App() {
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);

  return (
    <div className="App">
      <TopBar setMenuStatus={setIsMenuOpen} />
      <Nav isOpen={isMenuOpen} />
    </div>
  );
}

Затем TopBar необходимо установить значение isMenuOpen в true, используя функцию setIsMenuOpen() из реквизита.

TopBar.jsx

import React from "react";

export default function Topbar({ setMenuStatus }) {
  return (
    <div className="topbar__container">
      <div className="topbar__menuButton">
        <button
          type="button"
          onClick={() => {
            setMenuStatus(true);
          }}
        >
          Menu
        </button>
      </div>
    </div>
  );
}

Тогда компонент Nav установит определенный c класс (здесь .open), если isOpen поступает из Реквизиты true.

Nav.jsx

import React from "react";
import "./styles.css";

export default function Nav({ isOpen }) {
  return (
    <div id="nav" className={isOpen ? "open" : ""}>
      Menu
    </div>
  );
}

стилей. css

#nav {
  display: none;
}

#nav.open {
  height: 400px;
  display: inline-block;
}

Вы можете попробовать этот пример в этом codesandbox .

Answer 2

import React, {useState} from "react";
import "./styles.css";

export default function App() {
  const [toggle, setToggle]= React.useState(false)
  const [width, setWidth]= React.useState('')

  const showMenu = () => {
    setToggle(!toggle)
    if(toggle === true) {
      setWidth('50px')
    }else {
      setWidth('500px')
    }
  }
  return (
    <div className="App">
      <button onClick={showMenu}>Menu</button>
      <div style={{width, border:'1px solid red'}}>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
      </div>
    </div>
  );
}

Воспроизводящая ссылка: https://codesandbox.io/s/billowing-flower-rxdk3?file= / src / App. js: 0-592