react 通过ref 获取对应 dom 的位置信息

需求：

• 在点击某个dom 元素的时候滚动条要同步滚动

进程：

• 获取ref 打印，打印出来是一个dom 元素，看不到有什么方法
• 查找 dom 属性信息
• 找到了两个参数，offsetLeft：返回元素的水平偏移位置。 offsetTop：返回元素的垂直偏移位置。
• 这两个参数都是基于父节点的，可以直接使用

this.cellMainBox.current.scrollTop = activeCell.offsetTop - 150
this.cellMainBox.current.scrollLeft = activeCell.offsetLeft - 150

拓展：

属性 / 方法	描述
accessKey	设置或返回元素的 accesskey 属性。
addEventListener()	将事件处理程序附加到元素。
appendChild()	向元素添加（附加）新的子节点。
attributes	返回元素属性的 NamedNodeMap。
blur()	从元素中移除焦点。
childElementCount	返回元素的子元素个数。
childNodes	返回元素子节点的 NodeList。
children	返回元素的子元素的 HTMLCollection。
classList	返回元素的类名。
className	设置或返回元素的 class 属性值。
click()	模拟鼠标单击元素。
clientHeight	返回元素的高度，包括内边距。
clientLeft	返回元素左边框的宽度。
clientTop	返回元素上边框的宽度。
clientWidth	返回元素的宽度，包括内边距。
cloneNode()	克隆元素。
closest()	在 DOM 树中搜索与 CSS 选择器匹配的最接近的元素。
compareDocumentPosition()	比较两个元素的文档位置。
contains()	如果节点是节点的后代，则返回 true。
contentEditable	设置或返回元素的内容是否可编辑。
dir	设置或返回元素的 dir 属性的值。
firstChild	返回元素的第一个子节点。
firstElementChild	返回元素的第一个子元素。
focus()	让元素获得焦点。
getAttribute()	返回元素属性的值。
getAttributeNode()	返回属性节点。
getBoundingClientRect()	返回元素的大小及其相对于视口的位置。
getElementsByClassName()	返回拥有给定类名的子元素的集合。
getElementsByTagName()	返回拥有给定标签名称的子元素的集合。
hasAttribute()	如果元素拥有给定属性，则返回 true。
hasAttributes()	如果元素拥有任何属性，则返回 true。
hasChildNodes()	如果元素有任何子节点，则返回 true。
element.id	设置或返回元素 id 属性的值。
innerHTML	设置或返回元素的内容。
innerText	设置或返回节点及其后代的文本内容。
insertAdjacentElement()	在相对于元素的位置插入新的 HTML 元素。
insertAdjacentHTML()	在相对于元素的位置插入 HTML 格式的文本。
insertAdjacentText()	在相对于元素的位置插入文本。
insertBefore()	在现有子节点之前插入新子节点。
isContentEditable	如果元素的内容是可编辑的，则返回 true。
isDefaultNamespace()	如果给定的 namespaceURI 是默认值，则返回 true。
isEqualNode()	检查两个元素是否相等。
isSameNode()	检查两个元素是否是同一个节点。
isSupported()	已弃用。
lang	设置或返回元素的 lang 属性值。
lastChild	返回元素的最后一个子节点。
lastElementChild	返回元素的最后一个子元素。
matches()	如果元素与给定的 CSS 选择器匹配，则返回 true。
namespaceURI	返回元素的命名空间 URI。
nextSibling	返回位于相同节点树层级的下一个节点。
nextElementSibling	返回位于相同节点树层级的下一个元素。
nodeName	返回节点的名称。
nodeType	返回节点的节点类型。
nodeValue	设置或返回节点的值。
normalize()	合并元素中相邻的文本节点，并移除空的文本节点。
offsetHeight	返回元素的高度，包括内边距、边框和滚动条。
offsetWidth	返回元素的宽度，包括内边距、边框和滚动条。
offsetLeft	返回元素的水平偏移位置。
offsetParent	返回元素的偏移容器。
offsetTop	返回元素的垂直偏移位置。
outerHTML	设置或返回元素的内容（包括开始标签和结束标签）。
outerText	设置或返回节点及其后代的外部文本内容。
ownerDocument	返回元素的根元素（文档对象）。
parentNode	返回元素的父节点。
parentElement	返回元素的父元素节点。
previousSibling	返回位于相同节点树层级的上一个节点。
previousElementSibling	返回位于相同节点树层级的上一个元素。
querySelector()	返回与 CSS 选择器匹配的第一个子元素。
querySelectorAll()	返回与 CSS 选择器匹配的所有子元素。
remove()	从 DOM 中移除元素。
removeAttribute()	从元素中移除属性。
removeAttributeNode()	移除属性节点，并返回移除的节点。
removeChild()	从元素中移除子节点。
removeEventListener()	删除已使用 addEventListener() 方法附加的事件处理程序。
replaceChild()	替换元素中的子节点。
scrollHeight	返回元素的整体高度，包括内边距。
scrollIntoView()	将元素滚动到浏览器窗口的可见区域。
scrollLeft	设置或返回元素内容水平滚动的像素数。
scrollTop	设置或返回元素内容垂直滚动的像素数。
scrollWidth	返回元素的整体宽度，包括内边距。
setAttribute()	设置或更改属性的值。
setAttributeNode()	设置或更改属性节点。
style	设置或返回元素 style 属性的值。
tabIndex	设置或返回元素的 tabindex 属性的值。
tagName	返回元素的标签名。
textContent	设置或返回节点及其后代的文本内容。
title	设置或返回元素的 title 属性值。
toString()	将元素转换为字符串。