React系列之--props屬性

時間 2019-11-12

標籤 react 系列 props 屬性欄目 React 简体版

原文原文鏈接

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。javascript

PS:轉載請註明出處
做者:TigerChain
地址:http://www.jianshu.com/p/fa81cebac3ef
本文出自TigerChain簡書css

React系列教程html

一、React之props屬性

咱們想要在組件之間進行傳值，那麼props屬性就起到了這個做用,在React中props和state是兩個很是很是很是重要的屬性必定要掌握這兩個。(如下都是使用ES5的寫法，沒有特殊說明的都是使用ES5寫法)java

Note:屬性是用於設置默唸值，不改變的值使用props,而改變的值咱們要使用state，咱們後面章節再說react

二、React之props屬性基本用法

一、基本用法webpack

<Component data="測試props"/>

在Component組件中使用this.props.data就能夠取得data中的值(其中data這個字段能夠任意指定可是組件中的和獲取props要對應就行了)git

二、廢話很少說，直接上例子github

在這一節中咱們使用browserify來管理js代碼，若是不知道browserify能夠查看此節web

這裏假設你把browserify環境都搭建起來了chrome

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') );

五、咱們使用browserify來將index.js轉化成bundle.js

browserify -t [ babelify ] index.js -o bundle.js

固然咱們也可使用watchify

六、最後咱們在瀏覽器中查看結果

props_single.png

Note:props屬性不只能夠從爸爸傳遞給兒子組件，也能夠從兒子傳遞給孫子，能夠一直這樣傳遞下去，按需傳遞

三、多個值的傳遞

在上面咱們把父組件屬性傳遞到子組件了，這是一個屬性的傳遞，那麼如何傳遞多個屬性值呢，你們可能想到了，那就定義多個屬性值就行了麼。步驟以下：

一、普通方法

一、修改index.js

props_mutil.png

從圖能夠看出咱們只是修改了紅色框中的Props組件中的屬性值

<Props data={"我是props屬性1"} data2={"我是屬性值2"} />

二、修改Props.js來接收傳遞過來的值

props_propsmodify.png

一樣咱們看只是修改了紅色框聽部分，就是接收了props屬性值而且顯示

render: function() { return ( <div> {this.props.data} //新增長的代碼 <br/> {this.props.data2} </div> ); }

三、刷新瀏覽器看效果

props_mutl_result.png

從以上的結果咱們確實收到了多個參數值，可是有一個問題，若是有十個參數，我就得寫十個字段屬性，20個呢，這有點扯淡吧，有沒有什麼好的辦法呢？我能這樣問，答案是確定的，下面咱們來改造一下上面的代碼

二、推薦方法

咱們使用JSX的擴展語法來傳遞屬性值,也就是...語法

return <Commponent{...this.props}more="values" />;

咱們廢話很少說，咱們直接來上代碼看效果,仍是在上面代碼的基礎上修改

一、修改index.js

props_jsx_extend.png

從圖中咱們能夠看到，我添加了圖中紅色框中的部分，在這裏我偷偷也添加了一個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') );

二、修改Props.js

modify_props.png

這裏也沒有什麼好說的，咱們就是把傳遞過來的屬性調用了一下，讓其工做而已，如下是修改過的代碼

//測試方法點擊事件 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> ); }

三、刷新瀏覽器，看結果

props_jsx_extends_result.png

在這裏我打開了chrome的調試工具，咱們能夠看到,當咱們點擊測試方法按鈕的時候就會調用index.js中的test()方法，打印出了我是測試的信息，而且從瀏覽器的結果中咱們也能夠看出，使用JSX擴展語法...傳遞過來的屬性都被接收到了。這樣是否是比前面一個一個屬性參數的傳遞方便多了，代碼也規整了。

test()方法的啓示

很好了說明了，兒子組件如何調用父親的方法，也是一種將父親方法暴漏的方式

三、默認屬性

細心的朋友可能早都發現了，在多個值的傳遞中咱們發現Props.js對應的圖片中有這麼一段代碼

//設置默認屬性，返回一個json對象 getDefaultProps(){ return { data:"默認" } },

這段代碼是什麼意思呢？這段代碼實際上是爲屬性設置默認值，也就是說一個組件沒有傳遞任何屬性的時候，咱們調用了this.props.data就會使用默認的屬性值。注意這個方式是在ES5寫法中使用的，ES6寫法會有所不一樣

四、屬性校驗

在React中屬性是能夠校驗的，好比，咱們要記錄一我的的信息，名字是必須的而且是一個字符串，年齡是一個數字，愛好是一個數組等等這些要求和規範在React中使用propTypes

一、使用方法

一、在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, .... }

二、在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, .... }

二、實例代碼

一、咱們在Props.js中添加如下代碼

//規範傳遞過來的屬性範圍 propTypes:{ //年齡必須爲數字 age: React.PropTypes.number, },

以上規範了age屬性必須是數字類型

二、修改index.js中的ReactDOM.render()方法

ReactDOM.render(
 <Props data={{...propsData}} age={"10"} data3={test()}/>, document.getElementById('example') );

這們這裏估計給age屬性傳了一個字符串"10"，咱們來看看結果

propstype.png

咱們看到了瀏覽器報了一個警告，意思就是說age屬性須要一個數字，你傳了一個字符串，這就校驗了props屬性，對於這個例子咱們只須要把age屬性傳遞成數字便可解決掉警告問題

五、關於this.props.children

一、this.props.children屬性

this.props屬性和組件的屬性值是一一對應的，可是有一個例外就是this.props.children，它表示的是全部子節點的屬性

二、很少說，直接上代碼

咱們在上面的基礎上改代碼

一、在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;

二、修改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;