在 React 中构建模态的分步指南

模态是显示在屏幕顶部的消息框/弹出窗口。 这些用于从警报到输入的不同上下文中。 在这篇博客中，我们将学习如何在 React JS 中实现模态。

creat react app

让我们创建一个新的 React 应用程序

在 src 中创建一个新组件并将其导入 App.js 并在新组件中添加一些文本和一个按钮。 我们可以利用 Children Props 使模态可重用。 我将在下一篇博客中解释这一点。

使用函数作为道具：

我们需要创建一个布尔类型的 useState() 钩子。 此状态将控制模态是否应显示。 如果状态值为真，它将显示模态，否则将隐藏它。

当用户点击 Modal 组件中的关闭按钮时，我们需要将 state 的值更改为 false 以便它关闭。 我们不能直接在子组件中更改该状态，因为该状态是在父组件中定义的。 我们可以在父组件中创建一个函数并将其作为 props 传递给子组件来解决这个问题。 将此函数作为道具传递给子组件。

现在通过解构该函数并将其附加到关闭按钮上的 on-Click 事件来接受该函数，这样每当我们单击关闭时，状态值都会更改为 false，并且模式将被关闭。

是时候隐藏了

现在让我们实现逻辑以在单击关闭时隐藏模式。 只有使用 AND (&&) 逻辑，我们才能有条件地显示 UI。 使用 AND 逻辑，我们将仅在模态为真时显示模态。

默认情况下，模态值将为 false。 我们需要在 App.js 中添加一个按钮，以便在单击后显示模式。 我们需要在 App.js 中添加一个按钮并附加一个单击事件，该事件会将状态值更改为 true 以显示模式。

感谢您阅读我的文章。 我很乐意听取您的意见。 返回搜狐，查看更多