我想以可靠的方式找出 DOM 元素的尺寸。
我的考虑是为此使用 getBoundingClientRect 。
const elementRef = useRef<HTMLUListElement | null>(null);
const [dimensions, setDimensions] = useState<DOMRect | undefined>();
const element: HTMLUListElement | null = elementRef.current;
/**
* Update dimensions state.
*/
const updateDimensions = useCallback(() => {
if (!element) return;
setDimensions(element.getBoundingClientRect());
}, [element, setDimensions]);
/**
* Effect hook to receive dimensions changes.
*/
useEffect(() => {
if (element) {
updateDimensions();
}
}, [element, updateDimensions]);
这种方法的问题是 useEffect 只对 elementRef.current 使用react,而不对 rect 的变化使用react。显然浏览器中组件的绘制还没有完成,因为尺寸总是0。
如果我在 useEffect 之外做整个事情,那么它就可以工作。在控制台中,我看到 0 的 2 倍值,然后是正确的尺寸。
使用效果:
在 useEffect 之外:
但是,我想在状态中保存尺寸,为此我需要 useEffect。
我如何使用 getBoundingClientRect 来实现这一点,或者还有其他方法可以做到这一点?
解决方案
这不是自我 react 的问题。这是 ionic V5 react 中的一个错误。
通常你可以这样做:
https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node
但这里有一个问题:
https://github.com/ionic-team/ionic/issues/19770
我的解决方法是使用:https://github.com/que-etc/resize-observer-polyfill
import { RefCallback, useCallback, useState } from 'react';
import ResizeObserver from 'resize-observer-polyfill';
export function useDimensions(): [RefCallback<HTMLElement | null>, DOMRect | undefined] {
const [dimensions, setDimensions] = useState<DOMRect | undefined>();
const ref: RefCallback<HTMLElement | null> = useCallback((node: HTMLElement | null) => {
if (node) {
setDimensions(node.getBoundingClientRect().toJSON());
const resizeObserver = new ResizeObserver((entries) => {
if (entries.length) {
setDimensions(entries[0].target.getBoundingClientRect().toJSON());
}
});
resizeObserver.observe(node);
return () => {
resizeObserver.unobserve(node);
resizeObserver.disconnect();
};
}
}, []);
return [ref, dimensions];
}
最佳答案
您可以使用 callBackRef 来实现所需的行为:
import React, { useCallback, useState } from "react";
export default function App() {
const [dimensions, setDimensions] = useState(null);
const callBackRef = useCallback(domNode => {
if (domNode) {
setDimensions(domNode.getBoundingClientRect());
}
}, []);
return (
<div>
<h1 ref={callBackRef}>Measure me</h1>
</div>
);
}`
关于reactjs - 在 React 中通过 getBoundingClientRect 接收元素的尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60881446/