React中点击按钮打开导航栏的方式

Question

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

一开始我的导航组件的宽度为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>
    )
}

2. 导航

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

- Théo Vogel

---

你为什么要用<Link>包装菜单？ - Asking

为什么不使用预先构建和测试的Bootstrap React库，它可以处理许多你现在正在尝试做的底层过程。DRY（不要重复自己）。 - Saravanan

@问：我在尝试其他东西，只是忘记改变这个了。 - Théo Vogel

@Saravanan 我想创建一些比使用 Bootstrap 元素更个性化的东西。我只是想学习一些新的东西。 - Théo Vogel

Answer 1

要实现类似于此的功能，您需要将此逻辑设置在两个组件的共同父级上（例如，在此示例中为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必须使用从道具传递过来的函数setIsMenuOpen()把isMenuOpen的值设置为true。

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中尝试这个示例。

- johannchopin

---

这实际上是一种更好的方法。 - Blaze Clone

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

reproducing link: https://codesandbox.io/s/billowing-flower-rxdk3?file=/src/App.js:0-592

- Asking

---

@Théo Vogel，请告诉我我的示例是否对您有所帮助。 - Asking