React Native 入门（五） - Props（属性）

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

Props（属性）是组件在被创建的时候就能够使用的各种参数，通常是该组件被使用时传递过来的或者是该组件已经设置的默认参数。

传递属性

我们有两个文件 App.js 和 MyView.js：

App.js：

import React, { Component } from 'react';
import MyView from './MyView';

export default class App extends Component<{}> {
  render() {
    return <MyView name="小明"/>
  }
}

MyView.js：

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

export default class MyView extends Component {
  render() {
    return <Text
        style={{backgroundColor: 'cyan'}}>
      你好{this.props.name}
    </Text>
  }
}

在 MyView 中我们渲染显示一个文本组件，显示的内容包含了传递过来的 name 属性。在 App 中我们使用了 <MyView/> 并且传递了一个值为“小明”的 name 属性，这样在 MyView 中我们就可以获取到 name。运行效果如下：

默认属性与格式检查

当 MyView 没有接受到传递的属性时，我们可以设置默认属性。修改代码如下：

export default class MyView extends Component {
  static defaultProps = {
    age: 12,
    sex: '男'
  }

  render() {
    return <Text
        style={{backgroundColor: 'cyan'}}>
      你好{this.props.name}{'\n'}年龄{this.props.age}{'\n'}性别{this.props.sex}
    </Text>
  }
}

通过 static defaultProps = {} 这种固定的格式来给一个组件添加默认属性。我们在 App 中只传递了一个 name，所以 age 和 sex 都会从默认属性中读取，效果如下：

属性也可以设置格式检查，在设置之前我们需要先通过控制台导入 prop-types。prop-types 是 fb 推出的专门用来做类型检查的一个模块，以前集成在 React 中，后来被单独拿了出来。

yarn add prop-types

然后在 MyView 中导入：

import PropTypes from ‘prop-types’;

通过 static propTypes = {} 这种固定格式来设置属性的格式，比如说我们将 age 设置为 number 类型：

static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    sex: PropTypes.string
  }

然后我们在 App 中故意传递一个 string 类型的 age：

render() {
    return <MyView
        name="小明"
        age="12"
    />
  }

再次运行就会弹出一个黄色的警告提示我们格式错误，age 期望是 number 类型，却得到了 string 类型。

另外还可以设置必须要传递的属性，修改如下：

static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    sex: PropTypes.string.isRequired
  }

PropTypes.string.isRequired 表示 sex 是必须要传递的 string 类型的属性，由于 App 中只传递了 name 与 age，所以运行的时候会弹出下面的警告。不要忘记把 defaultProps 中的 sex 属性删除，有默认属性值的话，是永远不会有警告的。

更多的格式枚举请参考官方文档：facebook/prop-types

延展操作符

延展操作符 ... 是 ES6 语法的新特性，具体的说明可以参考 ECMAScript 6 入门 。

我们修改代码如下：

App.js：

import React, {Component} from 'react';
import MyView from './MyView';

export default class App extends Component<{}> {
  render() {
    var params = {name: '小明', age: 12, sex: '男'}
    return <MyView {...params}/>
  }
}

我们定义了一个对象 params，它包含了好几个属性。{...params} 表示的是将 params 中所有的属性传递给 MyView 。

MyView.js：

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import MySecondView from './MySecondView';

export default class MyView extends Component {

  static defaultProps = {
    age: 22
  }

  static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number,
    sex: PropTypes.string.isRequired
  }

  render() {
    return <MySecondView {...this.props}/>
  }
}

这里我们又通过 {...this.props} 将 MyView 获取到的所有属性传递给了 MySecondView 。

MySecondView：

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

export default class MySecondView extends Component {
  render() {
    return <Text
        style={{backgroundColor: 'cyan'}}>
      你好{this.props.name}{'\n'}年龄{this.props.age}{'\n'}性别{this.props.sex}
    </Text>
  }
}

在 MySecondView 中，我们就可以使用 name、age 以及 sex 这些属性了。运行效果和我们预想的一样：

解构赋值

解构赋值也是 ES6 语法的新特性，极大的简化了代码，增强了代码的可读性。

在上面代码的基础上，我们在 App 中如果只想把 params 的 name 和 sex 传递过去，可以有如下写法：

export default class App extends Component<{}> {
  render() {
    var params = {name: '小明', age: 12, sex: '男'}
    var {name: name, sex: sex} = params;
    return <MyView
        name={name}
        sex={sex}
    />
  }
}

由于我们只传递了 name 和 sex，那么 age 就显示默认值了：

我们讲一下这行代码的意思：

2 处是我们新定义的名为 name 和 sex 的新变量，而 1 处的 name 和 sex 代表的是 params 中的属性，这行代码的意思是我们新定义了两个变量 name 和 sex，它们的值分别是 params.name 和 params.sex 。并且在属性名称和变量名称相同时，我们可以简写成如下形式：

var {name, sex} = params;

关于解构赋值的详细介绍，可以参考这篇博文：【探秘ES6】系列专栏（六）：解构赋值

文章已同步至简书：http://www.jianshu.com/p/b419a0668cf3