React 获取真实的DOM节点

前端之家收集整理的这篇文章主要介绍了React 获取真实的DOM节点前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

获取真实的DOM节点

组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。

有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性

  1. var MyComponent = React.createClass({
  2. handleClick: function() {
  3. this.refs.myTextInput.focus();
  4. },render: function() {
  5. return (
  6. <div>
  7. <input type="text" ref="myTextInput" />
  8. <input type="button" value="Focus the text input" onClick={this.handleClick} />
  9. </div>
  10. );
  11. }
  12. });

为了获取真是DOM节点,html元素必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。

猜你在找的React相关文章