react-native操作“dom”

前端之家收集整理的这篇文章主要介绍了react-native操作“dom”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在弄react-native的时候,突然发现它不能像js一样获取页面的dom,那如果我要修改一些dom的属性值、文本什么的,要怎么做呢?

后来查谷歌,发现了一个名词:虚拟DOM

React在内存中维护一个快速响应的DOM描述。render()方法返回一个DOM的描述,React能够利用内存中的描述来快速地计算出差异,然后更新浏览器中的DOM。

为了和浏览器交互,我们需要对DOM节点进行引用,有两种方式来进行可以完成:

1、getDOMNode()

每一个挂载的React组件有一个getDOMNode()方法,你可以调用这个方法获取对该节点的引用。

注意:
getDOMNode()仅在挂载的组件上有效(也就是说,组件已经被放进了DOM中)。如果你尝试在一个未被挂载的组件上调用这个函数(例如在创建组件的render()函数调用getDOMNode()),将会抛出异常。

2、Refs
refs可以用来指向一个你拥有的组件。

var MyComponent = React.createClass({
  handleClick: function() {
    // Explicitly focus the text input using the raw DOM API.
    this.refs.myTextInput.getDOMNode().focus();
  },render: function() {
    // The ref attribute adds a reference to the component to
    // this.refs when the component is mounted.
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

React.render(
  <MyComponent />,document.getElementById('example')
);

更多详细内容请参见这个页面

猜你在找的React相关文章