单击 [React] 启动组件

单击 [React] 启动组件

Photo by 劳塔罗·安德里亚尼 on 不飞溅

创建我的 投资组合网站 我想知道如何为移动响应创建一个抽屉。那时创建模态的想法出现了，但出现了另一个问题。单击汉堡按钮后，模态组件将如何显示。我在网上搜索并发现了许多想法、技术和实现，但我不喜欢其中的大部分

所以我想出了将状态和函数作为道具传递给模态的想法，既简单又整洁

首先我创建了我的 modal.js 文件

modal.js 文件接受两个道具 show 和 toggle 道具。它检查 show 是真还是假。如果 show 为 false 它将不呈现任何内容，但如果 show 为 true 它将呈现内容

然后我创建我的父组件，我们将把道具数据传递给模态组件

我们使用 useState 挂钩来管理 isShow 状态。最初将其设置为 false 因为我们希望隐藏我们的模态。

然后我们创建一个切换函数，它将在 true 和 false 之间更改 isShow 状态。

然后我们将切换功能传递给按钮，并将其作为道具传递给模态组件。

这就是你可以在 React 中简单地创建模式和抽屉的方法。

你可以关注我 github 和 推特 并检查我的 网站

快乐编码

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/2804/05303108