1.父元件 Home.js

/*

React中的元件: 解決html 標籤構建應用的不足。         


使用元件的好處：把公共的功能單獨抽離成一個檔案作為一個元件，哪裡裡使用哪裡引入。


父子元件：元件的相互呼叫中，我們把呼叫者稱為父元件，被呼叫者稱為子元件


父子元件傳值（react 父子元件通訊）：

    父元件給子元件傳值 

		    1.在呼叫子元件的時候定義一個屬性  <Header msg='首頁'></Header>

			  2.子元件裡面 this.props.msg          


        說明：父元件不僅可以給子元件傳值，還可以給子元件傳方法,以及把整個父元件傳給子元件,可以讓子元件給父元件傳值。


    父元件主動獲取子元件的資料

        1、呼叫子元件的時候指定ref的值 <Header ref='header'></Header>      
        
        2、通過this.refs.header  獲取整個子元件例項  (dom（元件）載入完成以後獲取 )



*/


import React, { Component } from 'react';

import Header from './Header';

import '../assets/css/index.css';

class Home extends Component {

    constructor(props){
        super(props);        
        this.state={ 
          title:'首頁元件',
          count:20
        }
    }
    render() {
      return (
        <div>                  

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


             {/* <Header/>  */}


              {/* <Header title={this.state.title} num='aaaaaaaaaaaaa' />  */}


              <Header title={this.state.title} num={this.state.count} />
          <br />

          <hr />

            <br />

            這是首頁元件的內容
            
       
        </div>
      );
    }
  }
  
  export default Home;
  

　　2.子元件Header.js

import React, { Component } from 'react';


/*
父元件給子元件傳值：


    defaultProps:父子元件傳值中，如果父元件呼叫子元件的時候不給子元件傳值，可以在子元件中使用defaultProps定義的預設值

    propTypes：驗證父元件傳值的型別合法性

            1、引入import PropTypes from 'prop-types';

            2、類.propTypes = {
                name: PropTypes.string
            };


    都是定義在子元件裡面


https://reactjs.org/docs/typechecking-with-proptypes.html


*/




import PropTypes from 'prop-types';


class Header extends Component {
    constructor(props) {
        super(props);
        this.state = { 

            msg:"我是一個頭部元件"
         };
    }
    render() {
        return (
            <div>
                <h2>---{this.props.title}--- {this.props.num}</h2>
            </div>
        );
    }
}

//defaultProps   如果父元件呼叫子元件的時候不給子元件傳值，可以在子元件中使用defaultProps定義的預設值
Header.defaultProps={

    title:'標題'
}

//同行propTypes定義父元件給子元件傳值的型別

Header.propTypes={

    num:PropTypes.number
}


export default Header;