10、React系列之--props屬性

版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。

PS:轉(zhuǎn)載請注明出處
作者:TigerChain
地址:http://www.itdecent.cn/p/fa81cebac3ef
本文出自TigerChain簡書

React系列教程

1、React之props屬性

我們想要在組件之間進(jìn)行傳值，那么props屬性就起到了這個(gè)作用,在React中props和state是兩個(gè)非常非常非常重要的屬性一定要掌握這兩個(gè)。(以下都是使用ES5的寫法，沒有特殊說明的都是使用ES5寫法)

Note:屬性是用于設(shè)置默念值，不改變的值使用props,而改變的值我們要使用state，我們后面章節(jié)再說

2、React之props屬性基本用法

1、基本用法

<Component data="測試props"/>

在Component組件中使用this.props.data就可以取得data中的值(其中data這個(gè)字段可以任意指定但是組件中的和獲取props要對應(yīng)就好了)

2、廢話不多說，直接上例子

在這一節(jié)中我們使用browserify來管理js代碼，如果不知道browserify可以查看此節(jié)

這里假設(shè)你把browserify環(huán)境都搭建起來了

PS：本文最后的Demo是使用webpack+yarn來完成，這也是主流的方式，但是你掌握了browserify也算是多掌握一門技術(shù)。

(1)、我們新建props文件夾，并且搭建browserify環(huán)境

具體看browserify這一節(jié):http://www.itdecent.cn/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來將index.js轉(zhuǎn)化成bundle.js

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

當(dāng)然我們也可以使用watchify

6、最后我們在瀏覽器中查看結(jié)果

props_single.png

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

3、多個(gè)值的傳遞

在上面我們把父組件屬性傳遞到子組件了，這是一個(gè)屬性的傳遞，那么如何傳遞多個(gè)屬性值呢，大家可能想到了，那就定義多個(gè)屬性值就好了么。步驟如下：

1、普通方法

  • 1、修改index.js
props_mutil.png

從圖可以看出我們只是修改了紅色框中的Props組件中的屬性值

<Props data={"我是props屬性1"} data2={"我是屬性值2"} />
  • 2、修改Props.js來接收傳遞過來的值
props_propsmodify.png

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

render: function() {
        return (
            <div>
                {this.props.data}
                //新增加的代碼
                <br/>
                {this.props.data2}
            </div>
        );
    }
  • 3、刷新瀏覽器看效果
props_mutl_result.png

從以上的結(jié)果我們確實(shí)收到了多個(gè)參數(shù)值，但是有一個(gè)問題，如果有十個(gè)參數(shù)，我就得寫十個(gè)字段屬性，20個(gè)呢，這有點(diǎn)扯淡吧， 有沒有什么好的辦法呢？我能這樣問，答案是肯定的，下面我們來改造一下上面的代碼

2、推薦方法

我們使用JSX的擴(kuò)展語法來傳遞屬性值,也就是...語法

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

我們廢話不多說，我們直接來上代碼看效果,還是在上面代碼的基礎(chǔ)上修改

  • 1、修改index.js
props_jsx_extend.png

從圖中我們可以看到，我添加了圖中紅色框中的部分，在這里我偷偷也添加了一個(gè)test()方法，也就是說明了props不僅僅可以傳遞參數(shù)，對象也可以是一個(gè)方法，以下是修改的代碼

//定義一個(gè)屬性的對象
var propsData = {
    name:"JunJun",
    address:"china",
    height:"175cm"
}
//添加一個(gè)測試方法
function test(param){
    //把傳遞過來的參數(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
modify_props.png

這里也沒有什么好說的，我們就是把傳遞過來的屬性調(diào)用了一下，讓其工作而已，以下是修改過的代碼

    //測試方法點(diǎn)擊事件
    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、刷新瀏覽器，看結(jié)果
props_jsx_extends_result.png

在這里我打開了chrome的調(diào)試工具，我們可以看到,當(dāng)我們點(diǎn)擊測試方法按鈕的時(shí)候就會(huì)調(diào)用index.js中的test()方法，打印出了我是測試的信息，并且從瀏覽器的結(jié)果中我們也可以看出，使用JSX擴(kuò)展語法...傳遞過來的屬性都被接收到了。這樣是不是比前面一個(gè)一個(gè)屬性參數(shù)的傳遞方便多了，代碼也規(guī)整了。

test()方法的啟示

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

3、默認(rèn)屬性

細(xì)心的朋友可能早都發(fā)現(xiàn)了，在多個(gè)值的傳遞中我們發(fā)現(xiàn)Props.js對應(yīng)的圖片中有這么一段代碼

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

這段代碼是什么意思呢？這段代碼其實(shí)是為屬性設(shè)置默認(rèn)值，也就是說一個(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、我們在Props.js中添加以下代碼
//規(guī)范傳遞過來的屬性范圍
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"，我們來看看結(jié)果

propstype.png

我們看到了瀏覽器報(bào)了一個(gè)警告，意思就是說age屬性需要一個(gè)數(shù)字，你傳了一個(gè)字符串，這就校驗(yàn)了props屬性，對于這個(gè)例子我們只需要把a(bǔ)ge屬性傳遞成數(shù)字即可解決掉警告問題

5、關(guān)于this.props.children

1、this.props.children屬性

this.props屬性和組件的屬性值是一一對應(yīng)的，但是有一個(gè)例外就是this.props.children，它表示的是所有子節(jié)點(diǎn)的屬性

2、不多說，直接上代碼

我們在上面的基礎(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({
    /**
     * 用來設(shè)置默認(rèn)值
     * @return {[type]} [description]
     */
    getDefaultProps(){
        return {
            data:"默認(rèn)"
        }
    },
    //規(guī)范傳遞過來的屬性范圍
    propTypes:{
      //年齡必須為數(shù)字 
      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標(biāo)簽</p>
                    <h4>我是h4</h4>
                    <button>我是button</button>
                    <label>我是label</label>
                    <text>我是文本組件text</text>
                </PropsChildren>
            </div>
        );
    }

});

module.exports = Props;

修改的部分是

propos_children.png
  • 3、查看結(jié)果
props_child_result.png

從圖中我們可以知道我們就遍歷(使用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沒有特別說明都是基于yarn+webpack去編寫了,并且使用的ES6語法

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 最近看了一本關(guān)于學(xué)習(xí)方法論的書，強(qiáng)調(diào)了記筆記和堅(jiān)持的重要性。這幾天也剛好在學(xué)習(xí)React，所以我打算每天堅(jiān)持一篇R...
    gaoer1938閱讀 1,803評論 0贊 5
  • 深入JSX date:20170412筆記原文其實(shí)JSX是React.createElement(componen...
    gaoer1938閱讀 8,174評論 2贊 35
  • 本筆記基于React官方文檔，當(dāng)前React版本號為15.4.0。 1. 安裝 1.1 嘗試 開始之前可以先去co...
    Awey閱讀 7,913評論 14贊 128
  • 自己最近的項(xiàng)目是基于react的，于是讀了一遍react的文檔，做了一些記錄(除了REFERENCE部分還沒開始讀...
    潘逸飛閱讀 3,733評論 1贊 10
  • 文/公羽依娜 1、 最近，我去參加了5場面試，拿到了3個(gè)offer，最終，將目標(biāo)鎖定在一家跟自己職業(yè)規(guī)劃相匹配的培...
    公羽依娜閱讀 1,668評論 1贊 13

友情鏈接更多精彩內(nèi)容