Reactjs 使用 React 中的功能组件更改另一个组件的状态

发布于11月13日

我在我的标题中有一个按钮，它必须切换页面横向菜单的状态(以知道它是否必须显示).我在互联网上发现了如何使用类组件来做到这一点，而不是使用功能组件，你知道如何实现这一点吗？

以下是我的实际代码的简化，以重现我的问题(我删除了所有无用的代码).

App.js:

function App() {
  return (
    <div className="App">
        <Header />
        <div>
            <LateralMenu />
        </div>
    </div>
  );
}

Header组件:

function Header() {
    const [lateralIsOpen, setLateralIsOpen] = useState(true);

    function changeLateralMenu() {
        setLateralIsOpen(!lateralIsOpen);
    }

    return (
        <header>
            <div onClick={ changeLateralMenu }>
        </header>
    );
}

和LateralMenu组件:

function Header() {
    const [lateralIsOpen, setLateralIsOpen] = useState(true);

    return (
        <section>
            { lateralIsOpen ? "open" : "closed" }
        </section>
    );
}

我try (但可能不正确)在App组件中声明lateralIsOpen State，并通过props 将其发送给我的子组件(Header&amp；LateralMenu).

我还试着看了this question(和其他几个)，它非常类似，但我不知道如何将其应用于我的 case ，因为(据我所知)他在父组件中使用了一个按钮，这会更改父组件中的状态，然后通过props 将其发送给子组件……在我的例子中，切换它的按钮已经在一个子元素中.

export default function App() { const [lateralIsOpen, setLateralIsOpen] = useState(true); return ( <div className="App"> <Header toggleLateral={() => setLateralIsOpen((prev) => !prev)} /> <div> <LateralMenu isOpen={lateralIsOpen} /> </div> </div> ); } function Header({ toggleLateral }) { function changeLateralMenu() { toggleLateral(); } return ( <header> <div onClick={changeLateralMenu}>click</div> </header> ); } function LateralMenu({ isOpen }) { return <section>lateral is {isOpen ? 'open' : 'closed'}</section>; }

Reactjs 使用 React 中的功能组件更改另一个组件的状态

推荐答案

Reactjs相关问答推荐

自动化幻灯片放映以防止React中重复过多的正确方法是什么

在react.js的条形图中获取错误&unfined是不可迭代的

Reaction-路由v6动态路径RegExp

如何使图像zoom 并移动到点击点

Reaction Google Maps API无法获取标题

点击页脚链接时，如何更改ReactJS导航栏中的活动菜单项(样式为Tailwind CSS)？

如何修复ReferenceError：在构建过程中未定义导航器

无法在 NextJS 中获取嵌套对象

无法通过 fetch 获取数据到上下文中

在reduce()方法上得到NaN

标签文本删除了 MUI 概述的输入

React Wordpress Apache 在索引之外重新加载 -> 未找到页面

Next.js 和理智｜ npm run build 时预渲染页面/时发生错误

如何在 React.js 中提取 PDF 的内容？

使用登录保护 React 中的 SPA 应用程序 - 为什么这种方法不起作用？

父状态改变后子组件丢失状态

在 React 中，为什么不能向空片段添加键(短语法)？

服务器端分页未按预期工作

React 似乎在触发另一个组件时重新渲染了错误的组件

React中`onScroll`和`onScrollCapture`之间的区别？