版權(quán)聲明：本文為博主原創(chuàng)文章迟杂，未經(jīng)博主允許不得轉(zhuǎn)載刽沾。
PS:轉(zhuǎn)載請(qǐng)注明出處
作者:TigerChain
地址:http://www.reibang.com/p/fa81cebac3ef
本文出自TigerChain簡(jiǎn)書
1、React之props屬性
我們想要在組件之間進(jìn)行傳值排拷，那么props屬性就起到了這個(gè)作用,在React中props和state是兩個(gè)非常非常非常重要的屬性一定要掌握這兩個(gè)侧漓。(以下都是使用ES5的寫法，沒有特殊說(shuō)明的都是使用ES5寫法)
Note:屬性是用于設(shè)置默念值攻泼，不改變的值使用props,而改變的值我們要使用state火架，我們后面章節(jié)再說(shuō)
2鉴象、React之props屬性基本用法
1、基本用法
<Component data="測(cè)試props"/>
在Component組件中使用this.props.data就可以取得data中的值(其中data這個(gè)字段可以任意指定但是組件中的和獲取props要對(duì)應(yīng)就好了)
2何鸡、廢話不多說(shuō)纺弊，直接上例子
在這一節(jié)中我們使用browserify來(lái)管理js代碼，如果不知道browserify可以查看此節(jié)
這里假設(shè)你把browserify環(huán)境都搭建起來(lái)了
PS：本文最后的Demo是使用webpack+yarn來(lái)完成骡男，這也是主流的方式淆游，但是你掌握了browserify也算是多掌握一門技術(shù)。
(1)隔盛、我們新建props文件夾犹菱，并且搭建browserify環(huán)境
具體看browserify這一節(jié):http://www.reibang.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文件夾(在這里我們體驗(yàn)一下組件化的思想)腊脱，在component文件夾中新建一個(gè)Props.js(這就是一個(gè)組件)
//引入所需要的類
var React = require('react');
var Propos = React.createClass({
render: function() {
return (
<div>
{this.props.data}
</div>
);
}
});
//將此類暴漏出去 供個(gè)部使用
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來(lái)將index.js轉(zhuǎn)化成bundle.js
browserify -t [ babelify ] index.js -o bundle.js
當(dāng)然我們也可以使用watchify
6陕凹、最后我們?cè)跒g覽器中查看結(jié)果
Note:props屬性不僅可以從爸爸傳遞給兒子組件，也可以從兒子傳遞給孫子鳄炉，可以一直這樣傳遞下去杜耙，按需傳遞
3、多個(gè)值的傳遞
在上面我們把父組件屬性傳遞到子組件了拂盯，這是一個(gè)屬性的傳遞佑女，那么如何傳遞多個(gè)屬性值呢，大家可能想到了谈竿，那就定義多個(gè)屬性值就好了么团驱。步驟如下：
1、普通方法
- 1空凸、修改index.js
從圖可以看出我們只是修改了紅色框中的Props組件中的屬性值
<Props data={"我是props屬性1"} data2={"我是屬性值2"} />
- 2店茶、修改Props.js來(lái)接收傳遞過(guò)來(lái)的值
同樣我們看只是修改了紅色框聽部分，就是接收了props屬性值并且顯示
render: function() {
return (
<div>
{this.props.data}
//新增加的代碼
<br/>
{this.props.data2}
</div>
);
}
- 3劫恒、刷新瀏覽器看效果
從以上的結(jié)果我們確實(shí)收到了多個(gè)參數(shù)值，但是有一個(gè)問(wèn)題轿腺，如果有十個(gè)參數(shù)两嘴，我就得寫十個(gè)字段屬性，20個(gè)呢族壳，這有點(diǎn)扯淡吧憔辫， 有沒有什么好的辦法呢？我能這樣問(wèn)仿荆，答案是肯定的贰您，下面我們來(lái)改造一下上面的代碼
2坏平、推薦方法
我們使用JSX的擴(kuò)展語(yǔ)法來(lái)傳遞屬性值,也就是...語(yǔ)法
return <Commponent{...this.props}more="values" />;
我們廢話不多說(shuō)，我們直接來(lái)上代碼看效果,還是在上面代碼的基礎(chǔ)上修改
- 1锦亦、修改index.js
從圖中我們可以看到舶替，我添加了圖中紅色框中的部分，在這里我偷偷也添加了一個(gè)test()方法杠园，也就是說(shuō)明了props不僅僅可以傳遞參數(shù)顾瞪，對(duì)象也可以是一個(gè)方法，以下是修改的代碼
//定義一個(gè)屬性的對(duì)象
var propsData = {
name:"JunJun",
address:"china",
height:"175cm"
}
//添加一個(gè)測(cè)試方法
function test(param){
//把傳遞過(guò)來(lái)的參數(shù)重新拼接臧一個(gè)新的字符串
let newParsm = param.concat("junjun") ;
console.log(newParsm);
}
ReactDOM.render(
<Props data={{...propsData}} data2={"我是屬性值2"} data3={test}/>,
document.getElementById('example')
);
- 2抛蚁、修改Props.js
這里也沒有什么好說(shuō)的陈醒，我們就是把傳遞過(guò)來(lái)的屬性調(diào)用了一下，讓其工作而已瞧甩，以下是修改過(guò)的代碼
//測(cè)試方法點(diǎn)擊事件
handlerClick:function(){
{this.props.data3("我是測(cè)試方法:")}
},
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}>測(cè)試方法</button>
</div>
);
}
- 3钉跷、刷新瀏覽器，看結(jié)果
在這里我打開了chrome的調(diào)試工具肚逸，我們可以看到,當(dāng)我們點(diǎn)擊測(cè)試方法按鈕的時(shí)候就會(huì)調(diào)用index.js中的test()方法爷辙，打印出了我是測(cè)試的信息，并且從瀏覽器的結(jié)果中我們也可以看出吼虎，使用JSX擴(kuò)展語(yǔ)法...傳遞過(guò)來(lái)的屬性都被接收到了犬钢。這樣是不是比前面一個(gè)一個(gè)屬性參數(shù)的傳遞方便多了，代碼也規(guī)整了思灰。
test()方法的啟示
很好了說(shuō)明了玷犹，兒子組件如何調(diào)用父親的方法，也是一種將父親方法暴漏的方式
3洒疚、默認(rèn)屬性
細(xì)心的朋友可能早都發(fā)現(xiàn)了歹颓，在多個(gè)值的傳遞中我們發(fā)現(xiàn)Props.js對(duì)應(yīng)的圖片中有這么一段代碼
//設(shè)置默認(rèn)屬性，返回一個(gè)json對(duì)象
getDefaultProps(){
return {
data:"默認(rèn)"
}
},
這段代碼是什么意思呢油湖？這段代碼其實(shí)是為屬性設(shè)置默認(rèn)值巍扛，也就是說(shuō)一個(gè)組件沒有傳遞任何屬性的時(shí)候，我們調(diào)用了this.props.data就會(huì)使用默認(rèn)的屬性值乏德。注意這個(gè)方式是在ES5寫法中使用的撤奸，ES6寫法會(huì)有所不同
4、屬性校驗(yàn)
在React中屬性是可以校驗(yàn)的喊括，比如胧瓜，我們要記錄一個(gè)人的信息，名字是必須的并且是一個(gè)字符串郑什，年齡是一個(gè)數(shù)字府喳，愛好是一個(gè)數(shù)組等等這些要求和規(guī)范在React中使用propTypes
1、使用方法
- 1蘑拯、在ES5中使用方法
propTypes:{
// 可以聲明 prop 為指定的 JS 基本類型钝满。默認(rèn)
// 情況下兜粘，這些 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孔轴、實(shí)例代碼
- 1、我們?cè)赑rops.js中添加以下代碼
//規(guī)范傳遞過(guò)來(lái)的屬性范圍
propTypes:{
//年齡必須為數(shù)字
age: React.PropTypes.number,
},
以上規(guī)范了age屬性必須是數(shù)字類型
- 2熟吏、修改index.js中的ReactDOM.render()方法
ReactDOM.render(
<Props data={{...propsData}} age={"10"} data3={test()}/>,
document.getElementById('example')
);
這們這里估計(jì)給age屬性傳了一個(gè)字符串"10"距糖，我們來(lái)看看結(jié)果
我們看到了瀏覽器報(bào)了一個(gè)警告，意思就是說(shuō)age屬性需要一個(gè)數(shù)字牵寺，你傳了一個(gè)字符串悍引，這就校驗(yàn)了props屬性，對(duì)于這個(gè)例子我們只需要把a(bǔ)ge屬性傳遞成數(shù)字即可解決掉警告問(wèn)題
5帽氓、關(guān)于this.props.children
1趣斤、this.props.children屬性
this.props屬性和組件的屬性值是一一對(duì)應(yīng)的，但是有一個(gè)例外就是this.props.children黎休，它表示的是所有子節(jié)點(diǎn)的屬性
2浓领、不多說(shuō)，直接上代碼
我們?cè)谏厦娴幕A(chǔ)上改代碼
- 1势腮、在component中新建PropsChildrenjs
var React = require('react');
var PropsChildren = React.createClass({
/**
* 渲染每個(gè)元素
* @return {[type]} [description]
*/
renderList(){
return(
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
}));
},
render: function() {
return (
<div>
<br />
遍歷取提t(yī)his.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({
/**
* 用來(lái)設(shè)置默認(rèn)值
* @return {[type]} [description]
*/
getDefaultProps(){
return {
data:"默認(rèn)"
}
},
//規(guī)范傳遞過(guò)來(lái)的屬性范圍
propTypes:{
//年齡必須為數(shù)字
age: React.PropTypes.number,
},
handlerClick:function(){
{this.props.data3("我是測(cè)試方法:")}
},
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}>測(cè)試方法</button>
//新添加的部分
<PropsChildren>
<p>我是p標(biāo)簽</p>
<h4>我是h4</h4>
<button>我是button</button>
<label>我是label</label>
<text>我是文本組件text</text>
</PropsChildren>
</div>
);
}
});
module.exports = Props;
修改的部分是
- 3、查看結(jié)果
從圖中我們可以知道我們就遍歷(使用this.props.children)取得了標(biāo)簽的屬性值
到此這止我們就介紹完了props屬性
本章demo的地址
https://github.com/tigerchain/react-lesson/tree/master/lesson02/08-props 如果大家喜歡捎拯，可以給個(gè) star 鼓勵(lì)一下
ps:此demo使用的是yarn+webpack寫的泪幌，以后的demo沒有特別說(shuō)明都是基于yarn+webpack去編寫了,并且使用的ES6語(yǔ)法
