React子组件和父组件通信

React子组件和父组件通信包括以下几个方面：

1. 子组件获取父组件属性：props或者state
2. 子组件调用父组件的方法
3. 父组件获取子组件的属性：props或者state
4. 父组件调用子组件的方法

我们从下面这个例子来详细了解：

父组件

var Father = React.createClass({
    getDefaultProps: function () {
        return {
            name: "父组件"
        }
    },
    MakeMoney: function () { // 挣钱，供子组件调用
        alert("我在挣钱!");
    },
    CheckStudy: function () { // 学习，调用子组件方法
        this.refs["child"].Study();
    },
    getChildName: function () { // 调用子组件方法获取孩子名字
        alert(this.refs["child"].getName());
    },
    render: function () {

        return <div>
            <button onClick={this.CheckStudy}>监控孩子学习</button>
            <button onClick={this.getChildName}>获取孩子名字</button>
            <br/>
            子组件
            <Child ref="child" fatherName={this.props.name} MakeMoney={this.MakeMoney}></Child>
        </div>;
    }
});

子组件

var Child = React.createClass({
    getDefaultProps: function () {
        return {
            name: "子组件"
        }
    },
    StudyMakeMoney: function () { // 学习挣钱，调用父组件方法
        this.props.MakeMoney();
    },
    Study: function () { // 学习，调用子组件方法
        alert("我在学习！");
    },
    getName: function () {// 供父组件调用，返回名字
        return this.props.name;
    },
    render: function () {

        return <div>父组件名字：{this.props.fatherName}
            <button onClick={this.StudyMakeMoney}>孩子学习挣钱</button>
        </div>;
    }
});

对应的

1. 子组件Child通过父组件传入的name，获取父组件的props
2. 子组件Child通过父组件传入的MakeMoney方法调用父组件方法
3. 父组件Father，通过ref调用子组件的getName方法，获取props
4. 父组件Father,通过ref调用子组件的Study方法