React入門---可復用組件-10

主要對props更多重要的特性進行學習;

還是用之前代碼，

index.js代碼為：

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header'; 
import ComponentFooter from './components/footer.js';
import BodyIndex from './components/BodyIndex.js';

class Index extends React.Component{
    render(){
        return(
            <div>
                <ComponentHeader/>
                <BodyIndex/>
                {/*在這里給footer組件，添加props外來屬性*/}       
                <ComponentFooter userid={123456}/> 
            </div>
            );
    }
}
//與app.html進行一個綁定 
ReactDOM.render(<Index/>,document.getElementById('test'));

footer.js的代碼為：

import React from 'react';
import ReactDOM from 'react-dom';

export default class ComponentFooter extends React.Component{
    constructor(){
        super();
        this.state = {
            username:"azedada",
            age:24
        }
    }

    render(){
        return(
                <div>
                    <h1>這里是底部</h1>
                    <p>接收到父頁面的屬性：{this.props.userid}</p> 
                </div>
            )
    }

}

1.判斷類型

現在我們需要對父頁面傳來的 userId進行 類型判斷，只能接受number類型的：

由於React.PropTypes不再適用於React v15.5,改用prop-types庫，我們進行配置npm install prop-types -D

import React from 'react';
import ReactDOM from 'react-dom';
//引用prop-types
import PropTypes from 'prop-types';

export default class ComponentFooter extends React.Component{

    render(){
        return(
                <div>
                    <h1>這里是底部</h1>
                    {/*接收的userId只能為number類型*/}
                    <p>接收到父頁面的屬性：{this.state.username}:{this.state.age},{this.props.userid}</p> 
                </div>
            )    
    };    
}
    //對類型的判斷,es6的寫法
    //注意：React.PropTypes不再適用於React v15.5,改用prop-types庫; npm install prop-types -D
    ComponentFooter.propTypes={
            userid:PropTypes.number
        }

運行結果：如果userid為number類型則正常，如果為其他類型則報錯；

2.當其他人通過父頁面調用子頁面，忘記傳userid了，但是我們需要他必須傳，這時候需要用到isRequired屬性

(下面代碼就在上面基礎上直接修改)

//對類型的判斷,es6的寫法
    //注意：React.PropTypes不再適用於React v15.5,改用prop-types庫; npm install prop-types -D
    ComponentFooter.propTypes={
            userid:PropTypes.number.isRequired
        }

運行結果：如果userid存在則正常，如果沒有則會發出warning警告;

3.如果父頁面還有一個username，它不強制必須有，我們可以給它一個默認值，下面是footer.js的代碼

import React from 'react';
import ReactDOM from 'react-dom';
//引用prop-types
import PropTypes from 'prop-types';


//給父頁面username的值賦一個默認值
const defaultProps={
    username:"這是一個默認值"
}


export default class ComponentFooter extends React.Component{
    constructor(){
        super();
        this.state = {
            username:"azedada",
            age:24
        }
    }

    //事件函數 改變state的age
    changeAge(){
        this.setState({age:18})
    }

    render(){
        return(
                <div>
                    <h1>這里是底部</h1>
                    <p>{this.state.username}:{this.state.age}</p> 
                    {/*接收的userId只能為number類型*/}
                    <p>接收到父頁面的屬性：{this.props.userid},{this.props.username}</p>
                    {/*這里寫點擊事件，注意寫法是es6*/}
                    <input type="button" value="點擊改變年齡" onClick={this.changeAge.bind(this)}/>
                </div>
            )    
    };    
}
    //對類型的判斷,es6的寫法
    //注意：React.PropTypes不再適用於React v15.5,改用prop-types庫; npm install prop-types -D
    ComponentFooter.propTypes={
            userid:PropTypes.number.isRequired
        }
    //對username賦默認值
    ComponentFooter.defaultProps=defaultProps;    

運行結果：如果父頁面index.js沒有傳username，則會顯示"這是一個默認值"，如果傳入了"內容"，則被"內容"替換;

4.父頁面傳入的所有數據，注意是所有數據，子頁面接收到后，繼續傳給子頁面的子頁面；即index.js--->footer.js--->footchild.js；

首先創建footchild.js文件，然后引入到父頁面footer.js，相信到這里，大家都能自己完成這一步;

{/*下面是子頁面footchild*/}{/*{...this.props} 可以把父頁面所有的屬性收到，並且可以自己定義*/}
 <FootChild {...this.props} id={2121}/>

在FootChild組件里面調用出來：既能調用根父級index里面有的，也能調用在自己父級定義的;

import React from 'react';

export default class FootChild extends React.Component{
    render(){
        return(
                <div>
                    {/*既能調用根父級index里面有的，也能調用在自己父級定義的*/}
                    <p>{this.props.username} {this.props.userid} {this.props.id} </p>
                    }
                </div>
            )
    }
}

總結：