React函数组件搭配Styled-Components开发Modal关闭后页面无法滚动怎么办

问题原因 #

你遇到的关闭Modal后页面无法滚动的问题，核心有2个：

1. 控制页面滚动的document.body.style.overflow修改逻辑只写在了父组件的openModal函数里，但是Modal的所有关闭操作（点关闭按钮、点背景蒙层、按ESC键）都是直接在Modal组件内部修改showModal状态，完全没有触发openModal函数，所以overflow一直停留在hidden状态不会恢复。
2. 箭头图标的点击事件写法错误：当前你写的是onClick={() => openModal}，只是返回了函数本身没有执行，也没有传递active参数，逻辑完全没有生效（如果你的Modal能弹出，说明你实际运行的代码和你贴的注释版本有差异）。

修复方案 #

第一步：在父组件添加监听逻辑，自动同步页面滚动状态 #

直接在ColumnTop组件里添加useEffect监听showModal的变化，不管从哪里修改showModal，都自动对应修改页面滚动属性，比把逻辑写在打开函数里更可靠：

// 加在你现有useState声明的下方即可
useEffect(() => {
  document.body.style.overflow = showModal ? 'hidden' : 'auto';
  // 组件卸载时强制恢复滚动，避免异常残留
  return () => {
    document.body.style.overflow = 'auto';
  };
}, [showModal]);

第二步：修正点击事件写法 #

直接把箭头图标的点击事件改成控制Modal显示就行，不需要再走原来的openModal函数（上面的useEffect已经自动处理滚动逻辑了）：

<FaRegArrowAltCircleDown
  onClick={() => setShowModal(true)}
  className="FaIconModal"
/>

可选优化：Modal关闭逻辑调整 #

Modal组件里的关闭按钮逻辑建议直接设为false，不要用取反的写法，避免状态不同步导致的异常：

<CloseModalButton
  aria-label="Close modal"
  onClick={() => setShowModal(false)}
/>

修改完后不管你用哪种方式关闭Modal，页面滚动都会自动恢复正常。

内容的提问来源于stack exchange，提问作者JiwanJeon94