javascript - 在按钮上点击打开 NavBar 的 react 方式

Question

我试图找到一种方法来在单击“MENU”按钮时打开 ReactJS 应用程序的导航栏。

一开始，我的导航组件的宽度为0px(带有overflow : hidden)。当我点击按钮时，我的导航栏的 width 应该是 400px。我是 React 的初学者。

我有两个 React 组件:

1. 顶部栏

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>
    )
}

1. 导航

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

要实现类似的功能，您必须在两个组件的公共(public)父级中设置此逻辑(此处为 App 示例)。

App 将管理一个状态以确定 Nav 是否打开。该状态称为 isMenuOpen，可以使用 setIsMenuOpen() 函数更改。我们将给 child Nav 状态 isMenuOpen 并给 child 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 必须使用函数 setIsMenuOpen() 将 isMenuOpen 的值设置为 true Prop 。

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 将设置一个特定的类(这里是 .open)如果来自 props 的 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>
  );
}

styles.css

#nav {
  display: none;
}

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

你可以在这个 codesandbox 中尝试这个例子.