1、新增知識點

/**
 React中的組件: 解決html 標簽構建應用的不足。
 使用組件的好處：把公共的功能單獨抽離成一個文件作為一個組件，哪裏裏使用哪裏引入。
 父子組件：組件的相互調用中，我們把調用者稱為父組件，被調用者稱為子組件
 父子組件傳值（react 父子組件通信）
 父組件給子組件傳值
 1.在調用子組件的時候定義一個屬性  <Header msg=‘首頁‘></Header>
 2.子組件裏面 this.props.msg
 說明：父組件不僅可以給子組件傳值，還可以給子組件傳方法,以及把整個父組件傳給子組件,可以讓子組件給父組件傳值。

 父組件主動獲取子組件的數據
 1、父組件調用子組件的時候指定ref的值 <Header ref=‘header‘></Header>
 2、父組件通過this.refs.header  獲取整個子組件實例  (dom（組件）加載完成以後獲取 )
 
 defaultProps:父子組件傳值中，如果父組件調用子組件的時候不給子組件傳值，則可以在子組件中使用defaultProps定義的默認值
     //當獲取不到父組件的傳值，選擇默認值      
     Header1.defaultProps={
                    msg:"默認標題"
            }
 propTypes:驗證父組件傳值的類型
   //檢查父組件傳過來的數據類型
         Header1.propTypes={
            num:PropTypes.number
        }
  都是定義在子組件中
 
 
*/

2、代碼實例實現之子組件Header.js

import React from ‘react‘;

/**
 * 父子組件傳值
 */
class Header extends React.Component{
    constructor(props){
        super(props);
        this.state={
            msg:"header 內容"
        }
    }
    getMsg=()=>{
        //this.props.news.getData();
      //  alert(this.props.news.state.msg) 
 
//執行父組件數據
        this.props.news.getData(); //執行父組件方法並獲取數據
    }
    headerRun=()=>{
        alert("這是Header組件run方法")
    }
    render() {
        return(
            <div>
                <h2>{this.props.title}</h2>
                <br/>
                {this.state.msg}
                
 
<br/>
                <button onClick={this.props.run}>點擊調用父組件的run方法</button>
                <br/>
                <button onClick={this.props.news.getData}>獲取整個父組件方法</button>

                <br/>
                <button onClick={this.getMsg}>獲取整個父組件定義數據</button>
                <br/>
                <button onClick={this.props.news.getChildData.bind(this,"我是子組件數據")}>子組件傳值給父組件</button>

            </div>
        )
    }
}

export  default Header;

3、代碼實例實現之父組件Home10.js

import React from ‘react‘;
import Header from ‘./Header‘;
/**
 React中的組件: 解決html 標簽構建應用的不足。
 使用組件的好處：把公共的功能單獨抽離成一個文件作為一個組件，哪裏裏使用哪裏引入。
 父子組件：組件的相互調用中，我們把調用者稱為父組件，被調用者稱為子組件
 父子組件傳值（react 父子組件通信）
 父組件給子組件傳值
        1.在調用子組件的時候定義一個屬性  <Header msg=‘首頁‘></Header>
        2.子組件裏面 this.props.msg
        說明：父組件不僅可以給子組件傳值，還可以給子組件傳方法,以及把整個父組件傳給子組件,可以讓子組件給父組件傳值。

 父組件主動獲取子組件的數據
        1、父組件調用子組件的時候指定ref的值 <Header ref=‘header‘></Header>
        2、父組件通過this.refs.header  獲取整個子組件實例  (dom（組件）加載完成以後獲取 )
 */
class Home10 extends React.Component{
    constructor(props){
        super(props);
        this.state={
            msg:"我是一個首頁組件內容",
            title:"首頁"
        }
    }

    run=()=>{
        alert("這是Home10組件的run方法")
    }
    //獲取子組件傳過來的數據
    getChildData=(result)=>{
        alert(result);
    }

    getData=()=>{
        alert("獲取數據")
    }
    //父組件主動調用子組件數據和方法
    getHeaderMethod=()=>{
        alert(this.refs.header.state.msg);
        this.refs.header.headerRun();
    }
    render() {
        return(
            <div>
                <br/>
                <Header title={this.state.title} run={this.run} news={this} ref="header"/>
                <hr/><br/>
                {this.state.msg}
                <br/>
                <hr/>
                <button onClick={this.getHeaderMethod}>獲取子組件的數據</button>

            </div>
        )
    }
}
export  default Home10;

React之父子組件之間傳值