react 組件間通訊，父子間通訊

1、父組件傳值給子組件

     父組件向下傳值是使用了props屬性，在父組件定義的子組件上定義傳給子組件的名字和值，而後在子組件經過this.props.xxx調用就能夠了。

2、子組件傳值給父組件

　　子組件向父組件傳值和vue同樣也是利用props和回調函數實現的。

　　一、在子組件

　　

import React, { Component } from 'react';
class DateChild extends Component {
   constructor(props, context) {
     super(props, context);
     this.state = {
        val:'我是子組件值'
     }
  }
  childClick (e) {
      this.props.callback(this.state.val)
  }
  render() {
     return (
         <div onClick={(e) => this.childClick(e)}>點擊傳值給父組件</div>
     );
  }

}

export default DateChild;

由於是從子組件向父組件傳值，因此要在子組件中定義點擊事件觸發函數，而從父組件傳來的函數經過this.props來調用，這點和父組件向下傳值是同樣的。 而後咱們在父組件中定義子組件的props傳來的函數，在父組件調用這個函數就能夠了，通常像下面這樣寫：

import React, { Component } from 'react';
import DateChild from '../component/DateChild.js'
class Date extends Component {
     constructor(props, context) {
      　　super(props, context);
         this.state = {
             content:'我是父組件值'
         }
     }
     callback (mess) {
         this.setState({
           content: mess
         })
     }
     render() {
         return (
            <div>{this.state.content}
                 <DateChild callback={this.callback.bind(this)} />
　　　　　　　</div>
         );
     }
}
export default Date;

若是是非父子組件傳值，我通常是使用全局定義的狀態存儲機制來實現的