gpt4 book ai didi

javascript - 如何使用 React.useRef 获取实际的 Dom 节点? Element.getBoundingClientRect() 不适用于 useRef 变量

转载 作者:行者123 更新时间:2023-12-05 00:37:31 27 4
gpt4 key购买 nike

我正在尝试使用 Element.getBoundingClientRect() 来获取 dom 元素的 x、y、top、left 值。

const editorRef = useRef() 
... // attatched editor ref on the dom element that I'm interested
...
editorRef.current.focus() // works well
const editorNodeRect = editorRef.current.getBoundingClientRect() // got error saying getBoundingClientRect() is not a function

所以我通过查询选择节点来尝试这种方式
const editorNodebyQuery =document.querySelectorAll(".DraftEditor-root")[0];
const editorNodebyQueryRect = editorNodebyQuery.getBoundingClientRect() // work well!!

但我不喜欢通过查询访问dom节点..我认为它很重..
我想使用 useRef。

第一个 rootEditorNode 是我通过 querySelector 得到的,它有 getBoundingClientRect() 函数
第二个 editorRef.current 是我通过 useRef 得到的,它没有 getBoundingClientRect() 函数。

enter image description here

我只想知道如何将 getBoundingClientRect() 函数与 useRef() 一起使用

最佳答案

很可能您的 editorRef 指向的是 React 组件,而不是 DOM 元素。你可以得到这样的元素

var element=ReactDOM.findDOMNode(editorRef.current);
var rect =element.getBoundingClientRect();
但是 ReactDOM.findDOMNode 在严格模式下被弃用(推荐使用)
<React.StrictMode></React.StrictMode>
所以更好的方法是使用 forwardRef 如果您可以访问子组件,另一种选择是使用包装子组件的包装器 div 并像这样使用 useRef
<div ref={editorRef} >
<ChildComp/>
</div>
这将允许您访问 getBoundingClientRect() 可能会返回错误的大小(rect.top 0,rect.height 0 等),在这种情况下您需要延迟调用它
useEffect(() => {

setTimeout(() => {
var rect = editorRef.current.getBoundingClientRect();
}, 300);

}, [ ]);

关于javascript - 如何使用 React.useRef 获取实际的 Dom 节点? Element.getBoundingClientRect() 不适用于 useRef 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60574479/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com