版權聲明：本文為博主原創文章，未經博主允許不得轉載。
PS:轉載請注明出處
作者:TigerChain
地址:http://www.lxweimin.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.lxweimin.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/tigerchain/react-lesson/tree/master/lesson02/08-props 如果大家喜歡，可以給個 star 鼓勵一下
ps:此demo使用的是yarn+webpack寫的，以后的demo沒有特別說明都是基于yarn+webpack去編寫了,并且使用的ES6語法
