props解釋
props就是屬性，是為了描述一個(gè)組件的特征而存在的。它是父組件傳遞給子組件的，而且一經(jīng)指定，在被指定的組件的生命周期中則不再改變（這就引出后面state這個(gè)屬性了，后面會(huì)講），所以要使用，我們首先的在父控件使用子組件時(shí)定義需要的屬性,但不是絕對(duì)的可以添加默認(rèn)屬性，而且props作用不僅僅只是傳遞屬性值，還有約束的作用，后面會(huì)講。
單純的使用
例：在父組件中給子組件定義一個(gè)名字
- 1、創(chuàng)建一個(gè)PropsTest組件，并使用props中的name屬性
/**
* Created by laer on 2018/2/5.
*/
import React,{Component }from 'react';
import {Text}from 'react-native';
export default class PropsTest extends Component{
render(){
//在這里我們使用props中的name屬性
return <Text>{this.props.name}</Text>
}
}
- 2、在父控件中使用剛剛定義的PropsTest組件并設(shè)置name的值
/**
* Created by laer on 2018/2/5.
*/
import React,{Component }from 'react';
import PropsText from './js/Props_Text.js';
export default class HomePager extends Component{
render(){
return<PropsText name='Laitianbing'/>
}
}
但是：如果父組件在使用子組件的時(shí)候并沒有對(duì)name賦值，然而我們有要用到怎么辦，所以這里我們可以在子組件中設(shè)置默認(rèn)屬性
export default class PropsTest extends Component{
static defaultProps={ name: '小鳴' }
render(){
//在這里我們使用props中的name屬性
return <Text>{this.props.name}</Text>
}
}
父組件使用子組件時(shí)：
render(){
return<PropsText />
}
對(duì)props中的屬性值進(jìn)行約束和檢查
-
1、引用PropsTypes
注意：過去我們可以直接使用 React.PropTypes 進(jìn)行屬性確認(rèn)，不過這個(gè)自 React v15.5 起就被移除了。所以現(xiàn)在我們改用 prop-types 庫(kù)代替。
-
首先打開ws的terminal窗口
terminal窗口 - 其次輸入
npm install --save prop-types,這npm命令就是安裝prop-types這個(gè)庫(kù)，類似與安卓依賴庫(kù)，但是這個(gè)是安裝一次即可，更像安卓的插件吧（特別提示：這句命令行中的'--'兩個(gè)端橫線最好是手動(dòng)敲不要復(fù)制，原因系統(tǒng)不同--也不同，不懂沒關(guān)系，安裝不了出問題你就懂了）
直接復(fù)制有可能報(bào)錯(cuò)
把命令行中的兩個(gè)"--"自己手動(dòng)敲
正常的 - 引用
import PropTypes from 'prop-types';
特別提示：有時(shí)候我們?cè)侔惭b一些庫(kù)的時(shí)候，一切都正常，但還是安裝不了，關(guān)閉IDE，或是重啟電腦就可以了，實(shí)話我自己也不知道具體的原因，可能是npm中catch里面庫(kù)關(guān)系亂了
-
2、定義子組件
export default class PropsTest extends Component{
static defaultProps={ name: 'xiao ming',sex:'man'}
//約束的關(guān)鍵就是這里在定義屬性的時(shí)候指定屬性的類型，類似安卓private String name;
static propTypes={
name: PropTypes.string
, age: PropTypes.number
, sex: PropTypes.string.isRequired }
render(){
//在這里我們使用props中的name屬性
return <Text>{this.props.name}+' age:'+{this.props.age}+' sex:'+{this.props.sex}</Text>
}
}
- 3、在父組件中調(diào)用子組件
export default class HomePager extends Component{
render(){
var params = {name: 'Laitianbing', age: 18, sex: 'man'}
//return<PropsText name={'Laitianbing'} sex={'man'} age={23}/>
return<PropsText name = {params.name} sex = {params.sex} age = {params.age}/>
}
}
但是屬性太多這樣寫肯定不行啊，最新的ES6支持以下寫法
return<PropsText {...params}/>//params前面三個(gè)點(diǎn)和Markdown語(yǔ)言的```及安卓的...都是一個(gè)意思就是多個(gè)的意思，就是說(shuō)攜帶多個(gè)屬性或是說(shuō)攜帶全部屬性
變量的解構(gòu)賦值
提示錯(cuò)誤：既然我們加了類型檢驗(yàn)，肯定是有用的，根據(jù)其他資料，如果我們傳入錯(cuò)誤的類型，會(huì)在控制臺(tái)中發(fā)現(xiàn)有如下的警告，例如
Warning: Failed propType: Invalid propoptionalArrayof typestringsupplied toPropsva, expectedarray.
但是我在測(cè)試的時(shí)候沒有達(dá)到想要的效果，可能是我的IDE WS的問題吧
PropTypes約束支持：
- 基本類型, array, bool, func, number, object, string, symbol
- any, 任意不為空對(duì)象
- arrayOf, 指定數(shù)組中項(xiàng)的類型
- element, React 元素
常用指定子級(jí)只傳入一個(gè)級(jí)限制
{
children: React.PropTypes.element.isRequired,
}
- instanceOf, 指定類實(shí)例
- node, 每一個(gè)值的類型都是基本類型,
- objectOf, 指定類型組成的對(duì)象
- oneOf, 參數(shù)是數(shù)組, 指定傳的數(shù)據(jù)為數(shù)組中的值
比如定義一個(gè)action, 他有指定的常量值, 'web', 'app', 'browser',所以接收到 prop 也應(yīng)該是對(duì)應(yīng)的指定值.
{
action: React.PropsTypes.oneOf(['web', 'app', 'browser']),
}
- oneOfType, 參數(shù)是數(shù)組, 指定傳的數(shù)據(jù)為數(shù)組中的類型
- shape, 指定對(duì)象類型內(nèi)部的結(jié)構(gòu)定義
比如需要接收一個(gè) member 參數(shù), member 里面有兩個(gè)值,一個(gè) id,一個(gè) name,現(xiàn)在要設(shè)置id,name的類型
{
member: React.PropTypes.shape({
id: React.PropTypes.number.isRequired,
name:React.PropTypes.string,
}),
}
- 在指定類型后使用isRequired在聲明 prop 是必傳的
自定義校驗(yàn)器 (props, propName, componentName) => {return true}
特別說(shuō)明：我在測(cè)試的時(shí)候，在Text中顯示了中文，但是出現(xiàn)了亂碼，通過網(wǎng)上說(shuō)的將WS的FileEncondings全部設(shè)置為utf-8，但是并沒有用，暫時(shí)沒找到解決方法，如果有知道的請(qǐng)留言
