React Native 入门（七） - ref

当前 RN 版本：0.49
操作环境：Windows 10

ref 可以看做是组件被渲染后，指向组件的一个引用，我们可以通过 ref 来获取到这个组件的实例。

下面我们通过一个例子来看一下。

MyView.js：

import React, {Component} from 'react';
import {
  View,
  Text
} from 'react-native';

export default class MyView extends Component {

  static defaultProps = {
    age: 22
  }

  constructor(props) {
    super(props)
    this.state = {
      age: this.props.age
    }
  }

  getAge() {
    return this.state.age;
  }

  render() {
    return 
      
        小明的年龄是：
      
    
  }
}

在这个组件中，我们只渲染了一行文本。然后写了一个 getAge() 的方法，用来返回 age 的大小。

App.js：

import React, {Component} from 'react';
import {
  View,
  Text,
  Button
} from 'react-native';
import MyView from './MyView';

export default class App extends Component<{}> {

  constructor(props) {
    super(props);
    this.state = {
      age: 0
    }
  }

  render() {
    return 
      
      
        {this.state.age}
      
       {
            var age = this.refs.myView.getAge();
            this.setState({
              age: age
            })
          }}/>
    
  }
}

这里我们渲染了三个组件：一个 ，一个 用来显示当前组件里的 age 的大小，以及一个按钮。

我们给 MyView 设置了一个 ref 属性 ref='myView' ，这个名字是任意取的。然后按下按钮的时候，通过 this.refs.myView 获取到了 MyView 的实例并且调用到了 getAge() 这个方法，这样我们就获取到了 MyView 中的 age 的大小。

点击前

点击后

上图是按下按钮前后的显示。

另外，用 ref 获取组件时也有两种写法：

this.refs.myView

或者

this.refs['myView']

需要注意第二种方式是需要带引号的。选择哪种方式，根据自己的习惯来就好，个人喜欢第一种。

文章同步自 CSDN：http://blog.csdn.net/qq_24867873/article/details/78354492

欢迎关注我的微信公众号