使用 useState 的弹出窗口在 React 18 中停止工作

Question

我使用

useState

制作了一个弹出窗口，它在 React 17 中工作，但在 React 18 中停止，没有显示任何错误。

当我将

isVisible

状态设置为

true

时，最初会显示弹出窗口，但将其设置为使用按钮不起作用。

我想知道为什么会出现这种情况，以及如何将其迁移到 React 18，因为我的项目中的其他依赖项需要它。

{isVisible && (
  <Popup
    visible={isVisible}
    toggle={() => {
      setLightboxVisible(false);
      document.body.classList.toggle("body-noscroll-class");
    }}
  >
    Lorem Ipsum dolor sit amet.
  </Popup>
)}

<button 
  onClick={() => {
    setLightboxVisible(true);
  }}>
Show Popup
</button>

这是一个显示行为的 Codesandbox。

Answer 1

您不应该使用 css display 来显示或隐藏 React 中的元素。只需使用 React 代码将其渲染到 DOM 或不将其渲染到 DOM。您已经在 app.js 中执行了此操作，然后在弹出窗口中再次执行此操作。所以在CSS中你不需要display属性。在新的codesandbox中查看简化版本。

使用 useEffect 监听 isVisible 的更改，以确定何时切换 body 上的 css 类。

将 onClick 添加到模态背景，然后在内部 div 上使用 e.stopPropagation 防止单击事件冒泡到父级。

在更新后的 CodeSandbox 中查看这些更改。

Answer 2

按照@Miłosz

的建议，通过将 

click

 挂钩中的 

mousedown

 更改为 

useOuterClick

来修复

https://codesandbox.io/s/relaxed-cdn-vjih7v?file=/src/hooks.js