當前 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】系列專欄（六）：解構賦值

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

歡迎關注我的微信公眾號