React父子組件傳值props && PropTypes &&defaultProps

父子組件：組件的相互調用中，我們把調用者稱爲父組件，被調用者稱爲子組件

父子組件（react父子組件通信）：

父組件給子組件傳值
1.在調用子組件的時候定義一個屬性，

2.子組件裏面 this.props.msg
父組件不僅能和子組件傳值，還可以給子組件傳方法，以及把整個父組件傳給子組件。

父組件主動獲取子組件的數據

1. 調用子組件時指定ref的值，

<Header ref='header'></Header>

2.通過this.refs.header 獲取整個子組件實例

父子組件傳值

引入者爲父組件，被引入者爲子組件。

1.父組件

import React from 'react';
import Header from './Header'

class News extends React.Component{
    constructor(props){
        super(props)   // 父子組件傳值，|| 固定寫法
        
        // 定義數據
        this.state ={
            title:'新聞組件',     
        }
    }
    render(){
        return(
            <div>

              <Header title={this.state.title}/> 

            </div>
        )
    }
}

export default News;

子組件

import React, {Component} from 'react'

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg:'這是一個頭部組件!'
          };
    }
    render() {
        return (
            <div>
                <p>{this.props.title}</p>
            </div>
        );
    }
}
export default Header;

進階組件獲取方法，獲取整個組件

父組件

import React from 'react';
import Header from './Header'

class News extends React.Component{
    constructor(props){
        super(props)   // 父子組件傳值，|| 固定寫法
        
        // 定義數據
        this.state ={
            title:'新聞組件',
          
        }
       
    }
    run =()=>{
        alert('父組件的方法')
    }
    getData =()=>{
        alert('父組件的getData方法')
    }
    getChden =(res)=>{
        alert(res)
       this.setState({
           title:res
       })
    }
    render(){
        return(
            <div>
                    {/* 
                    title={this.state.title}     // 傳值
                    run={this.run}               // 傳方法
                    news={this}                  // 傳整個組件
                */}
              <Header title={this.state.title} run={this.run} news={this}/> 

            </div>
        )
    }
}
export default News;

子組件

import React, {Component} from 'react'

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg:'這是一個頭部組件!'
          };
    }
    render() {
        return (
            <div>
                {/* 接收值 */}
                <p>{this.props.title}</p>  
                {/* 接收方法 */}
                <button onClick={this.props.run}>父組件傳過來的方法</button>
                {/* 接收整個組件調運其中的方法 */}
                <button onClick={this.props.news.getData}>父組件getData方法</button>
                 {/* 子組件想父組件傳值 */}
                <button onClick={this.props.news.getChden.bind(this,'向父組件傳值')}>向父組件傳值getChden</button>
            </div>
        );
    }
}

export default Header;

.
3.如果父組件沒有給子組件傳值，只是掛載，我們可以在子組件裏使用默認值

Header.defaultProps={ 
 title:'標題'   // 沒傳值默認顯示標題
}

4. 定義傳值類型

propTypes

// 不需要安裝，本身自帶
import PropTypes from ‘prop-types’

<Header   num=20 />
Header.propTypes={
	num:PropTypes.number //  指定數字類型
}