reactjs - react-resize-observer 使用 Bootstrap 模式返回空值

Question

我正在尝试使用 react-resize-observer 检测容器大小的变化。为此，我在我ResizeObserver的自定义组件中嵌入了一个。

当组件单独使用时效果很好。但是，一旦在 Bootstrap 模态（来自 react-bootstrap）中使用它，就会使用null 值 ( ) 调用ResizeObserver的回调。onResizewidth === height === 0

我究竟做错了什么？

Answer 1

问题来自模态的显示方式：带有动画。当模态组件第一次渲染时，它是隐藏的，因此 react-resize-observer 报告空值。

即时修复

关闭动画：

<Modal
  animation={false}
>

至少，您应该尝试一下，以确保解决问题。

在保持动画的同时使 react-resize-observer 工作

诀窍是仅在模态动画实际开始时才开始显示ResizeObserver及其父组件，这要归功于onEntering回调：

export const MyModal = () => {
  const [ showComponent, setShowComponent ] = useState(false);

  return (
    <Modal
      onEntering={() => setShowComponent(true)}
    >
      {showComponent && (
        <div>
          <ResizeObserver onResize={(rect) => {...}}/>
          ...
        </div>
      )}
    </Modal>
  );
}