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>
        )
    }
}