在单击按钮时打开导航栏的react方式

IT技术 javascript css reactjs
2021-05-01 18:47:06

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

在开始的时候我的导航组件拥有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>
    )
}
  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
2个回答

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

App将管理一个状态以确定是否Nav打开。状态被调用isMenuOpen并且可以使用该setIsMenuOpen()函数进行更改。我们将为孩子们提供Nav状态，isMenuOpen并TopBar从函数中给孩子们一个回调setIsMenuOpen()：

应用程序.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()的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 is ，组件Nav将设置一个特定的类（这里.open）。isOpentrue

导航.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;
}

你可以在这个codeandbox 中尝试这个例子。

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

其它你可能感兴趣的问题
上一篇为什么按钮点击触发器与 setTimeout() 触发器不同？ 下一篇在 React Web 应用程序中使用 createjs-soundjs