react怎么获取dom节点距离文档的top值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react怎么获取dom节点距离文档的top值相关的知识，希望对你有一定的参考价值。
参考技术A 为了获取真实的dom节点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。var MyComponent = React.createClass(
handleClick: function()
this.refs.myTextInput.focus();
,
render: function()
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick=this.handleClick />
</div>
);
);
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);本回答被提问者采纳 参考技术B 你试试，this.refs.myref.getBoundingClientRect().top
// myref 是要获取的元素的ref值，自定义的ref.
七.获取真实的DOM节点
组件并不是真实的DOM节点。而是存在于内存之中的数据结构。叫做虚拟DOM(virtual DOM). 只有当它插入文档后，才会变成真实的DOM。
根据React的设计。所有的DOM变动。都先在虚拟DOM下发生。然后在将实际发生变动的部分，反应在真实DOM上。这种算法叫DOMdiff.他可以极大的提高网页的性能表现。
但是有时需要从组件获取真实 DOM 节点。这时要用到ref属性。
<!DOCTYPE html>
<html>
<head>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var MyComponent = React.createClass({
handleClick:function(){
this.refs.myTextInput.focus();
},
render:function(){
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
)
}
})
ReactDOM.render(
<MyComponent />,
document.getElementById("example")
)
</script>
</body>
</html>
上面代码中 组件MyComponent 的子节点有个文本输入框，用于获取用户的输入。
这时就必须获取真实的DOM节点。虚拟节点是拿不到用户输入的。
为了做到这一点，文本输入框必须有个ref 属性。然后 this.refs[refName]就会返回这个真实DOM节点。
需要注意的是。由于 this.refs[refName]获取的是真实的DOM节点。所以必须等到虚拟DOM插入文档以后，才能使用这个属性，否则会报错。
上面代码中。通过为组件指定 Click事件的回调函数。确保了只有等到真实DOM发生Click事件之后才会读取this.refs[refName]属性
以上是关于react怎么获取dom节点距离文档的top值的主要内容，如果未能解决你的问题，请参考以下文章