Reactjs 单击按钮不会切换组件(当按钮和组件位于两个单独的文件中时)

发布于08月23日

我的版面文件:

import Menu from "./Menu";
import ButtonMenu from "./ButtonMenu";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className="grid h-screen grid-cols-[repeat(4,min-content)] overflow-x-scroll">
        <Menu />
        <Pane1 />
        <Pane2 />
        <Pane3 />
        <div className="w-[100vw]">
          <ButtonMenu />
          <main>{children}</main>
        </div>
      </body>
    </html>
  );
}

我的文件菜单:

"use client";
import { useState } from "react";

export default function Menu() {
  const [open, setOpen] = useState(true);
  return (
    <div
      className={` overflow-x-hidden overflow-y-scroll ${ open ? "w-[5vw]" : "w-[20vw]" }`}
    >
      <button type="button" onClick={() => setOpen(!open)}>
       ...
      </button>
      <nav><ul><li></li></ul></nav>
    </div>
  );
}

我的按钮菜单文件:

"use client";
import { useState } from "react";

export default function OpenMenu() {
  const [open, setOpen] = useState(true);
  return (
    <div>
      <button type="button" onClick={() => setOpen(!open)}>
       ...
      </button>
    </div>
  );
}

我的问题很简单.When you click on the 100 (onClick event) that is in the 101 file, then the 102 does not open/close, and nothing happens, WHY?. Menu组件是一个单独的文件.Menu文件和ButtonMenu文件是我的Layout文件中的两个组件.为什么ButtonMenu不能打开/关闭Menu？

// app/MenuContextProvider.tsx "use client"; import { createContext, useContext, useState } from "react"; const MenuContext = createContext<{ open: boolean; setOpen: Function }>({ open: false, setOpen: () => {}, }); export default function MenuContextProvider({ children }: { children: React.ReactNode }) { const [open, setOpen] = useState(true); return <MenuContext.Provider value={{ open, setOpen }}>{children}</MenuContext.Provider>; } export function useMenuContext() { return useContext(MenuContext); }

import Menu from "./Menu"; import ButtonMenu from "./ButtonMenu"; import MenuContextProvider from "./MenuContextProvider" export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body className="grid h-screen grid-cols-[repeat(4,min-content)] overflow-x-scroll"> <MenuContextProvider> <Menu /> <Pane1 /> <Pane2 /> <Pane3 /> <div className="w-[100vw]"> <ButtonMenu /> <main>{children}</main> </div> </MenuContextProvider> </body> </html> ); }

"use client"; import { useMenuContext } from "./MenuContextProvider" export default function Menu() { const {open, setOpen} = useMenuContext(); return ( <div className={` overflow-x-hidden overflow-y-scroll ${ open ? "w-[5vw]" : "w-[20vw]" }`} > <button type="button" onClick={() => setOpen(!open)}> ... </button> <nav><ul><li></li></ul></nav> </div> ); }

"use client"; import { useMenuContext } from "./MenuContextProvider" export default function OpenMenu() { const {open, setOpen} = useMenuContext(); return ( <div> <button type="button" onClick={() => setOpen(!open)}> ... </button> </div> ); }

Reactjs 单击按钮不会切换组件(当按钮和组件位于两个单独的文件中时)

推荐答案

Reactjs相关问答推荐

更新数据时有关CQR和更新UI的问题

导致类型错误的调度不是函数"；

XChaCha20-Poly1305的解密函数

错误./src/TopScroll.js 31：21-31导出'；(作为'；随路由导入)在'；Reaction-Router-Dom'；中找不到

是否在Extra Reducer完成作业(job)时触发createListenerMiddleware？

Reaction-Query&-使用Mutation触发成功，而应该触发错误

为什么react日历时间轴项Renderprops 不能与useState挂钩一起使用？

滚动视图样式高度没有任何区别

在 Next13 中将 props 传递给 onClick 从服务器到客户端组件

React router v5 仅在生产中不适用于嵌套路由

无法使axiosmockadapter正常工作

单击按钮时如何添加或删除 3d 对象

部署到github pages时请求路径错误

Primereact 的日历组件在每个月 12 日之后使用非唯一键生成

使用 react-markdown 组件时 Tailwind CSS 的问题

使用dayjs时如何在输入类型日期时间本地字段中设置默认值？

@react-three/postprocessing 没有匹配的从 three.module.js 导出以导入WebGLMultisampleRenderTarget

npm init vite@latest 和 npm init vite 有什么区别？

useEffect 仅在跟随链接后有效，不适用于直接链接

a.active 类在导入 x.scss 文件时有效，但在使用 x.module.scss 时无效