react組件間的信息交流數據傳遞圖文講解

React 組件之間交流的方式，能夠分爲如下 3 種：
a【父組件】向【子組件】傳值；
b【子組件】向【父組件】傳值；
c 沒有任何嵌套關係的組件之間傳值（PS：好比：兄弟組件之間傳值）

1.父組件向子組件傳遞信息

這個比較容易和直觀

// 父組件
var MyContainer = React.createClass({
  getInitialState: function () {
    return {
      checked: true
    };
  },
  render: function() {
    return (
      <ToggleButton text="Toggle me" checked={this.state.checked} />
    );
  }
});

// 子組件
var ToggleButton = React.createClass({
  render: function () {
    // 從【父組件】獲取的值
    var checked = this.props.checked,
        text = this.props.text;

    return (
        <label>{text}: <input type="checkbox" checked={checked} /></label>
    );
  }
});

2子組件向父組件傳遞信息

子組件須要控制本身的 state， 而後告訴父組件本身的state，經過props調用父組件中用來控制state的函數，在父組件中展現子組件的state變化。

//子組件
var Child = React.createClass({
    render: function(){
        return (
            <div>
                請輸入郵箱：<input onChange={this.props.handleEmail}/>
            </div>
        )
    }
});
//父組件，此處經過event.target.value獲取子組件的值
var Parent = React.createClass({
    getInitialState: function(){
        return {
            email: ''
        }
    },
    handleEmail: function(event){
        this.setState({email: event.target.value});
    },
    render: function(){
        return (
            <div>
                <div>用戶郵箱：{this.state.email}</div>
                <Child name="email" handleEmail={this.handleEmail.bind(this)}/>
            </div>
        )
    }
});
React.render(
  <Parent />,
  document.getElementById('test')
);

3.兄弟組件傳遞信息

咱們能夠經過給這兩兄弟一個共同的父親，而後結合上面的兩種方法
將老大的信息傳給父親（子傳父），再經過父親傳給老二信息實現交流（父傳子）

這裏只寫出了父組件代碼實現input到list的數據傳遞

class CommentApp extends Component {
    constructor() {
        super()
        this.state = {
            arry: []
        }
    }
    getDate(obj) {
        this.state.arry.push(obj)
        this.setState({
            arry: this.state.arry
        })
        console.log(this.state.arry)
    }
    render() {
        return (
            <div>
                <CommentInput date={this.getDate.bind(this)}/>
                <CommentList arry={this.state.arry}/>
            </div>
        )
    }
}