版權聲明：本文為博主原創文章，未經博主允許不得轉載。
PS:轉載請注明出處
作者:TigerChain
地址:http://www.jianshu.com/p/fa81cebac3ef
本文出自TigerChain簡書
1、React之props屬性
我們想要在組件之間進行傳值，那么props屬性就起到了這個作用,在React中props和state是兩個非常非常非常重要的屬性一定要掌握這兩個。(以下都是使用ES5的寫法，沒有特殊說明的都是使用ES5寫法)
Note:屬性是用於設置默念值，不改變的值使用props,而改變的值我們要使用state，我們后面章節再說
2、React之props屬性基本用法
1、基本用法
<Component data="測試props"/> 在Component組件中使用this.props.data就可以取得data中的值(其中data這個字段可以任意指定但是組件中的和獲取props要對應就好了)
2、廢話不多說，直接上例子
在這一節中我們使用browserify來管理js代碼，如果不知道browserify可以查看此節
這里假設你把browserify環境都搭建起來了
PS：本文最后的Demo是使用webpack+yarn來完成，這也是主流的方式，但是你掌握了browserify也算是多掌握一門技術。
(1)、我們新建props文件夾，並且搭建browserify環境
具體看browserify這一節:http://www.jianshu.com/p/93a112dc62b9
(2)、新建index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>props用法</title> </head> <body> <div id="example"></div> <script src="bundle.js"></script> </body> </html> (3)、新建component文件夾(在這里我們體驗一下組件化的思想)，在component文件夾中新建一個Props.js(這就是一個組件)
//引入所需要的類 var React = require('react'); var Propos = React.createClass({ render: function() { return ( <div> {this.props.data} </div> ); } }); //將此類暴漏出去 供個部使用 module.exports = Propos; (4)在props目錄下新建index.js文件，並且使用require引入Props組件
// index.js var React = require('react'); var ReactDOM = require('react-dom'); var Props = require('./component/Props.js') ; ReactDOM.render( <Props data="我是props屬性"/>, document.getElementById('example') ); 5、我們使用browserify來將index.js轉化成bundle.js
browserify -t [ babelify ] index.js -o bundle.js 當然我們也可以使用watchify
6、最后我們在瀏覽器中查看結果
Note:props屬性不僅可以從爸爸傳遞給兒子組件，也可以從兒子傳遞給孫子，可以一直這樣傳遞下去，按需傳遞
3、多個值的傳遞
在上面我們把父組件屬性傳遞到子組件了，這是一個屬性的傳遞，那么如何傳遞多個屬性值呢，大家可能想到了，那就定義多個屬性值就好了么。步驟如下：
1、普通方法
- 1、修改index.js
從圖可以看出我們只是修改了紅色框中的Props組件中的屬性值
<Props data={"我是props屬性1"} data2={"我是屬性值2"} /> - 2、修改Props.js來接收傳遞過來的值
同樣我們看只是修改了紅色框聽部分，就是接收了props屬性值並且顯示
render: function() { return ( <div> {this.props.data} //新增加的代碼 <br/> {this.props.data2} </div> ); } - 3、刷新瀏覽器看效果
從以上的結果我們確實收到了多個參數值，但是有一個問題，如果有十個參數，我就得寫十個字段屬性，20個呢，這有點扯淡吧， 有沒有什么好的辦法呢？我能這樣問，答案是肯定的，下面我們來改造一下上面的代碼
2、推薦方法
我們使用JSX的擴展語法來傳遞屬性值,也就是...語法
return <Commponent{...this.props}more="values" />; 我們廢話不多說，我們直接來上代碼看效果,還是在上面代碼的基礎上修改
- 1、修改index.js
從圖中我們可以看到，我添加了圖中紅色框中的部分，在這里我偷偷也添加了一個test()方法，也就是說明了props不僅僅可以傳遞參數，對象也可以是一個方法，以下是修改的代碼
//定義一個屬性的對象 var propsData = { name:"JunJun", address:"china", height:"175cm" } //添加一個測試方法 function test(param){ //把傳遞過來的參數重新拼接臧一個新的字符串 let newParsm = param.concat("junjun") ; console.log(newParsm); } ReactDOM.render( <Props data={{...propsData}} data2={"我是屬性值2"} data3={test}/>, document.getElementById('example') ); - 2、修改Props.js
這里也沒有什么好說的，我們就是把傳遞過來的屬性調用了一下，讓其工作而已，以下是修改過的代碼
//測試方法點擊事件 handlerClick:function(){ {this.props.data3("我是測試方法:")} }, render: function() { return ( <div> 名字:{this.props.data.name} <br/> 地址:{this.props.data.address} <br /> 身高:{this.props.data.height} <br /> {this.props.data2} <br /> <button onClick={this.handlerClick}>測試方法</button> </div> ); } - 3、刷新瀏覽器，看結果
在這里我打開了chrome的調試工具，我們可以看到,當我們點擊測試方法按鈕的時候就會調用index.js中的test()方法，打印出了我是測試的信息，並且從瀏覽器的結果中我們也可以看出，使用JSX擴展語法...傳遞過來的屬性都被接收到了。這樣是不是比前面一個一個屬性參數的傳遞方便多了，代碼也規整了。
test()方法的啟示
很好了說明了，兒子組件如何調用父親的方法，也是一種將父親方法暴漏的方式
3、默認屬性
細心的朋友可能早都發現了，在多個值的傳遞中我們發現Props.js對應的圖片中有這么一段代碼
//設置默認屬性，返回一個json對象 getDefaultProps(){ return { data:"默認" } }, 這段代碼是什么意思呢？這段代碼其實是為屬性設置默認值，也就是說一個組件沒有傳遞任何屬性的時候，我們調用了this.props.data就會使用默認的屬性值。注意這個方式是在ES5寫法中使用的，ES6寫法會有所不同
4、屬性校驗
在React中屬性是可以校驗的，比如，我們要記錄一個人的信息，名字是必須的並且是一個字符串，年齡是一個數字，愛好是一個數組等等這些要求和規范在React中使用propTypes
1、使用方法
- 1、在ES5中使用方法
propTypes:{
// 可以聲明 prop 為指定的 JS 基本類型。默認 // 情況下，這些 prop 都是可傳可不傳的。 optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, optionalSymbol: React.PropTypes.symbol, .... } - 2、在ES6中使用方法
MyComponent.propTypes = {
// You can declare that a prop is a specific JS primitive. By default, these // are all optional. optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, optionalSymbol: React.PropTypes.symbol, .... } 2、實例代碼
- 1、我們在Props.js中添加以下代碼
//規范傳遞過來的屬性范圍 propTypes:{ //年齡必須為數字 age: React.PropTypes.number, }, 以上規范了age屬性必須是數字類型
- 2、修改index.js中的ReactDOM.render()方法
ReactDOM.render(
<Props data={{...propsData}} age={"10"} data3={test()}/>, document.getElementById('example') ); 這們這里估計給age屬性傳了一個字符串"10"，我們來看看結果
我們看到了瀏覽器報了一個警告，意思就是說age屬性需要一個數字，你傳了一個字符串，這就校驗了props屬性，對於這個例子我們只需要把age屬性傳遞成數字即可解決掉警告問題
5、關於this.props.children
1、this.props.children屬性
this.props屬性和組件的屬性值是一一對應的，但是有一個例外就是this.props.children，它表示的是所有子節點的屬性
2、不多說，直接上代碼
我們在上面的基礎上改代碼
- 1、在component中新建PropsChildrenjs
var React = require('react'); var PropsChildren = React.createClass({ /** * 渲染每個元素 * @return {[type]} [description] */ renderList(){ return( React.Children.map(this.props.children, function (child) { return <li>{child}</li>; })); }, render: function() { return ( <div> <br /> 遍歷取提this.props.children的值 <ul> {this.renderList()} </ul> </div> ); } }); module.exports = ProposChildren; - 2、修改Props.js
//引入所需要的類 var React = require('react'); var ProposChildren = require('./ProposChildren.js') ; var Propos = React.createClass({ /** * 用來設置默認值 * @return {[type]} [description] */ getDefaultProps(){ return { data:"默認" } }, //規范傳遞過來的屬性范圍 propTypes:{ //年齡必須為數字 age: React.PropTypes.number, }, handlerClick:function(){ {this.props.data3("我是測試方法:")} }, render: function() { return ( <div> 名字:{this.props.data.name} <br/> 地址:{this.props.data.address} <br /> 身高:{this.props.data.height} <br /> 年齡:{this.props.age} <br /> <button onClick={this.handlerClick}>測試方法</button> //新添加的部分 <PropsChildren> <p>我是p標簽</p> <h4>我是h4</h4> <button>我是button</button> <label>我是label</label> <text>我是文本組件text</text> </PropsChildren> </div> ); } }); module.exports = Props; 修改的部分是
- 3、查看結果
從圖中我們可以知道我們就遍歷(使用this.props.children)取得了標簽的屬性值
到此這止我們就介紹完了props屬性
本章demo的地址
https://github.com/githubchen001/react-lesson/tree/master/lesson02/08-props 如果大家喜歡，可以給個 star 鼓勵一下