在单击下一个按钮时切换侧边栏 js答案

【问题标题】：Toggle Sidebar on click to a Button next js在单击下一个按钮时切换侧边栏 js
【发布时间】：2022-07-18 22:40:29
【问题描述】：

我是 react 新手。请帮助我摆脱这个问题。我有两个不同的组件，导航栏和侧边栏。我的侧边栏默认是隐藏的。在顶部导航栏中，我有一个菜单栏图标。现在，当我单击菜单栏图标（位于另一个名为顶部导航栏的组件中）时，我想将一个类切换到侧边栏。但是如果不导入它，我就无法从导航栏触发这个功能。我想触发这个功能

    const [openSidebar, setOpenSidebar] = useState(false);

    const sideNavOpen = () => {
        setOpenSidebar(openSidebar => !openSidebar)
    }

当我点击这里时（不同的组件）：

<li>
   <button onClick={sideNavOpen}>
       <FaBars />
   </button>
</li>

我怎样才能做到这一点？请高手帮帮我。这是我的完整代码：

顶部导航栏

import Link from 'next/link';
import React from 'react';
import { FaBars } from "react-icons/fa";

const Navbar = () => {
    return (
        <div className='navbar-wrapper'>
            <div className="container">
                <div className="navbar-brand">
                    <Link href="/">
                        <a>Navbar</a>
                    </Link>
                </div>
                <ul>
                    <li>
                        <Link href="/">
                            <a>Home</a>
                        </Link>
                    </li>
                    <li>
                        <Link href="/about">
                            <a>About Us</a>
                        </Link>
                    </li>
                    <li>
                        <Link href="/contact">
                            <a>Contact</a>
                        </Link>
                    </li>
                    <li>
                        <button>
                            <FaBars />
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    );
}

export default Navbar;

侧边栏

import React from 'react';
import { useState } from 'react';
import Link from "next/link";

const Sidebar = () => {

    const [openSidebar, setOpenSidebar] = useState(false);

    const sideNavOpen = () => {
        setOpenSidebar(openSidebar => !openSidebar)
    }



    return (
        <div className={"sidebar" + (openSidebar ? " sidebar-active" : "")}>
            <div>
                <ul>
                    <li>
                        <Link href="/">
                            <a>Home</a>
                        </Link>
                    </li>
                    <li>
                        <Link href="/about">
                            <a>About</a>
                        </Link>
                    </li>
                    <li>
                        <Link href="/contact">
                            <a>Contact</a>
                        </Link>
                    </li>
                </ul>
            </div>
        </div>
    );
}

export default Sidebar;

【问题讨论】：

标签： javascript node.js reactjs next.js

【解决方案1】：

好的，所以您想访问两个不同组件中的状态，因此您必须声明该状态并通过 props 将其传递给像这样的子组件

    const App = () => {
    const [state, setState] = useState(false)
    return (
    <NavBar state={state} setState={setState} />
    <SideBar state={state} setState={setState} />
    )
}

您可以像这样在组件中访问此状态

    const NavBar = ({state, setState}) => {
    return <button onClick={() => setState(state => !state)}>{state}</button>
}


const SideBar = ({state, setState}) => {
    return <button onClick={() => setState(state => !state)}>{state}</button>
}

如果您正在寻找一种无需通过 props 即可在您的应用中随处使用的状态，您可以搜索 React 上下文的文档

【讨论】：