react resize observer使用Bootstrap模式返回null值

Question

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

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

我做错了什么？

Answer 1

问题来自模态的显示方式：使用动画。当模态组件第一次呈现时，它是隐藏的，因此rease resize observer报告null值。

即时修复

关闭动画：

<Modal
animation={false}
>

至少，你应该尝试一下，只是为了确保它能解决问题。

使react调整大小观察者在保持动画的同时工作

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

export const MyModal = () => {
const [ showComponent, setShowComponent ] = useState(false);
return (
<Modal
onEntering={() => setShowComponent(true)}
>
{showComponent && (
<div>
<ResizeObserver onResize={(rect) => {...}}/>
...
</div>
)}
</Modal>
);
}