问题标签 [resize-observer]

有没有办法检查ResizeObserver给定页面中存在的所有条目？

有任何开发工具可以帮助它吗？试图搜索它，但没有结果

我想将 nivo 与 Next 一起使用，但是当我加载包含使用 nivo 制作的饼图的页面时，出现此错误：ReferenceError: ResizeObserver is not defined.

我的Pie.js组件：

我的chart.js页面：

此错误仅在使用ResponsivePie和不使用时出现Pie。我还尝试让它与 React 项目一起使用，但虽然我没有收到此错误，但似乎没有显示任何内容。

编辑：

经过一番调查，@nivo/core 0.79.0依赖似乎有问题。我们应该在 GitHub 存储库上打开一个问题。我做了一些更改以检查它是否是由我的 Next.js 版本引起的，但该错误仅发生在 @nivo/core 0.79.0 中。

我想仅在宽度更改时触发 ResizeObserver 而在高度更改时不使用它。可能吗？

例子：

它在我手动调整窗口大小时起作用，但在内容高度发生变化时不起作用，这是我所需要的。

难道我做错了什么？

--

我正在尝试按照此处的配方（第 4 节结束，在“做什么”下）获得一个可自行调整大小的画布。所以我有一个ResizeObserver连接来观察我的画布元素的变化。画布元素具有 100% 的高度，并且位于容器元素内部，该容器元素本身就是元素的子flex元素。这组确切的情况似乎导致了连锁反应，其中画布的高度随着时间的推移不断增加。

我想要这个的原因是因为我希望画布填充它的容器，因此是 100% 的高度，但我不希望它的实际渲染内容被浏览器拉伸。

这是一个 JSFiddle，这是代码中的一个最小示例：

我的申请有问题。我制作了一个包装 achildren并在其周围显示“显示更多/更少”的组件。它接受 aninitialHeight和 a MaxHeight，它们是 2 个数字，我以内联样式打印。然后我比较孩子的身高和initialHeight因为如果孩子比我允许的小，就没有必要显示显示更多的东西。

我的问题是我正在尝试处理一个特定情况：在一种情况下，孩子是一个包含 API 调用并默认显示加载器的组件。当 API 调用成功时，我会收到图像并隐藏加载程序。这意味着在最初的几秒钟内，我的孩子身高大约是 80 像素（加载器），然后可能是 600 像素或更多（图像）。所以我使用了一个observer，认为这是最好的解决方案：

然后我有一些 CSS 来处理 scollbar 和溢出：

我的问题是，当我单击Show more按钮时，它尝试设置innerExpand为!innerExpand切换，但立即将自身重置为 false，可能是因为observer在重新渲染时重新定义了可能？

我遇到了一个带有 ResizeObserver 的递归循环，其中观察到的容器内的某些东西在重新渲染时改变了容器的大小，这导致 ResizeObserver 重新触发。

在这种特定情况下，我怀疑有几个项目可能会导致这种情况，但无法查明是什么原因造成的。使用 DevTools 调试器，我可以看到 ResizeObserver 被触发，但堆栈跟踪为空。

很有可能它是由 Javascript 引起的，但同样有可能是由 css 布局的某些部分引起的，它不能被堆栈跟踪。

有什么方法可以查看为什么调用 ResizeObserver ？

回调包含目标，但目标是观察到的对象，而不是最初更改的对象。可以在这里找到最小的复制品 - https://jsfiddle.net/jamessw/5czoyws6/44/