从另一个组件更改组件状态答案

【问题标题】：Change component state from another component从另一个组件更改组件状态
【发布时间】：2021-10-18 00:31:53
【问题描述】：

我正在尝试在 NextJS original sidebar 中执行相同的侧边栏。为此，我创建了两个组件：

菜单按钮组件：

export default function MobileMenuBtn() {

return (
    <div className="bg-gray-800 text-gray-100 flex justify-between md:hidden">
        <div className="block p-4 text-white font-bold">Better Dev</div>
        <button onClick={()=>???????????} className="mobile-menu-button p-4 focus:outline-none focus:bg-gray-700">
        <svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
        </button>
        
    </div>
)

}

以及侧边栏本身的组件：

export default function Sidebar() {
return (
    <div className="sidebar bg-blue-800 text-blue-100 w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 
    transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out">
        <div className="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
            Verb To Be
        </div>
        
    </div>
)

}

当我单击菜单按钮时显示/隐藏侧边栏我试图使用 useState 但问题是我不知道如何从 MobileMenuBtn 更改 Sidebar 组件的状态强>。

【问题讨论】：

能否请您提供codesandbox中的问题示例

标签： reactjs next.js

【解决方案1】：

您的侧边栏组件 + MobileMenuBtn 需要具有读取/写入通用状态的权限。

最简单的解决方案：在它们的父组件（正在渲染<Sidebar /> 和<MobileMenuBtn /> 的组件）中，您可以创建一个公共状态并将相关信息传递给每个组件：

const ParentComponent = () => {
const [showSidebar, setShowSidebar] = useState(false);

const handleChangeSidebar = () => setShowSidebar(!showSidebar);

return (
  <>
   <Sidebar open={showSidebar} />
   <MobileMenuBtn onClick={handleChangeSidebar} />
  </>
);
}

这样，您的两个组件都会收到必要的信息：

侧边栏：

export default function Sidebar({ open }) {
// now you can conditionally render on open === true and open === false
return (
    <div className="sidebar bg-blue-800 text-blue-100 w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 
    transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out">
        <div className="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white">
            Verb To Be
        </div>
    </div>
)
}

MobileMenuBtn

export default function MobileMenuBtn({ onClick }) {

return (
    <div className="bg-gray-800 text-gray-100 flex justify-between md:hidden">
        <div className="block p-4 text-white font-bold">Better Dev</div>
        <button onClick={onClick} className="mobile-menu-button p-4 focus:outline-none focus:bg-gray-700">
        <svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
        </button>
    </div>
);
}

另一种方法是：React Context

【讨论】：