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

Question

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

当组件被隔离使用时，它工作得很好。但是，一旦在Bootstrap模式中使用它(从react-bootstrap)，就会使用空值(width === height === 0)调用ResizeObserver的onResize回调。

我做错了什么？

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>
  );
}