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方法