如何用React Hook编写一个对话框组件？

本文共计1006个文字，预计阅读时间需要5分钟。

React Hook 实现对话框组件，提供参考内容，包括：准备、思路：对话框组件是必要的，当需要弹出对话框时，它能够弹出来；当不需要时，页面上是没有任何显示的。这意味着需要一个状态来控制对话框的显示与隐藏。

React Hook实现对话框组件，供大家参考，具体内容如下

准备

• 思路：对话框组件是有需要的时候希望它能够弹出来，不需要的时候在页面上是没有任何显示的，这就意味着需要一个状态，在父组件点击按钮或其他的时候能够更改+ 它并显示，同时子组件（对话框组件）点击关闭的时候也需要更改这个状态。

进阶：为对话框组件背景添加蒙皮，当对话框内容需要滚动时限制浏览器页面的滚动。

• React Hook 主要用到了 useState，useContext，useContext 主要用于将父组件的 setStatus 传递给子组件以至于它可以更新状态。

附上 Dialog 和 DialogMain组件代码，其中DialogMain 为父组件，使用时只需将其挂载至 App.js。