为什么我不在reactjs中使用getBoundingClientRect（）？

Question

在我的最新项目中，我使用了getBoundingClientRect()。另一位React工程师告诉我，我不应该使用它，因为浏览器兼容性。这不应该由Webpack / Babel处理吗？

Answer 1

您可以在caniuse.com上查看getBoundingClientRect()（以及其他任何内容）的浏览器支持。

正如你在那里看到的那样，getBoundingClientRect()一直是well supported for a long time。请务必阅读脚注。不要在返回的对象上使用x和y属性，而且你很清楚。

Answer 2

据我所知，Webpack不会默认处理浏览器API的跨浏览器支持，为此你必须使用polyfills，但它们可能有增加你的包大小的缺点。根据您使用的功能，您可以使用目标polyfill（仅适用于一个或几个API）而不是通用的，请参阅Weeding Out Your ES6 Webpack Bundle Sizes。

更具体的问题 - 取决于你打算使用getBoundingClientRect() - 你可以看看react-measure，这是一个非常好的包，当涉及到你的组件的大小信息。我发现它在处理高级反应布局应用程序时非常有用，我在我自己的可调整大小的布局组件中使用它：react-reflex。