反应方式来打开NavBar onClick按钮 [英] React way to open a NavBar onClick on a button

问题描述

当我单击" MENU "按钮时，我试图找到一种方法来打开ReactJS应用程序的导航栏.

I trying to find a way to open the navbar of ReactJS app when i'm clicking on my "MENU" button.

一开始，我的导航组件的 width 宽度为 0px (其中 overflow:隐藏).当我单击按钮时，导航栏的 width 宽度应为 400px .我是React的初学者.

At the beginning my nav component have a width of 0px (with overflow : hidden). When i'm clicking on the button my nav should have a width of 400px. I'm a beginner with React.

我有两个React组件:

I have two React Components :

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

1. 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

推荐答案

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

To achieve something like that you have to set this logic in the common parent of both component (here App for the example).

App 将管理状态以确定 Nav 是否打开.该状态称为 isMenuOpen ，可以使用 setIsMenuOpen()函数进行更改.我们将状态 isMenuOpen 赋予子项 Nav ，并将子项 TopBar 赋予函数 setIsMenuOpen()的回调>:

App will manage a state to determine if the Nav is open or not. The state is called isMenuOpen and can be changed using the setIsMenuOpen() function. We will give to the children Nav the state isMenuOpen and to the children TopBar a callback from the function 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 .道具.

Then the TopBar have to set the value of isMenuOpen to true using the function setIsMenuOpen() from the props.

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

然后，如果来自props的 isOpen 为 true ，则组件 Nav 将设置特定的类(此处为 .open ).代码>.

Then the component Nav will set a specific class (here .open) if isOpen coming from props is 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中尝试此示例.

这篇关于反应方式来打开NavBar onClick按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！