子組件通知父組件狀態(tài)變化就是這樣，就好像是兒子找爸爸要零花錢，零花錢以及給不給都是爸爸說(shuō)了算的。

這個(gè)其實(shí)應(yīng)該是一個(gè)動(dòng)態(tài)應(yīng)用中最常見(jiàn)的通信，比如jubotron組件的點(diǎn)擊按鈕，form組件的表單出現(xiàn)：
這就是一個(gè)典型的兄弟之間的通信：

兄弟節(jié)點(diǎn)其實(shí)可以就是子父通信&&父子通信的疊加
首先按鈕被點(diǎn)擊，子組件通知負(fù)組件這個(gè)事件，然后父組件把這個(gè)消息帶給另一個(gè)子組件
下邊是個(gè)點(diǎn)擊按鈕顯示表單的例子：

/**
 * Created by niuGuangzhe on 2016/9/10.
 */
var Jumbotron = React.createClass({
    handleClick: function () {
        this.props.openTheWindow(false);
    },
    render: function () {
        return (
            

                

                    

                        開始體驗(yàn)
                        
                    
                
            
        );
    }
});

var Form = React.createClass({
    getInitialState:function(){
        return {
            inputTitle:"請(qǐng)輸入標(biāo)題",
            mainBody:"在此輸入正文"
        };
    },
    //點(diǎn)擊按鈕觸發(fā)事件：清除所有已經(jīng)輸入的文字
    cleanText:function(){
        this.setState({
            inputTitle:"",
            mainBody:""});
    },
    //表單監(jiān)視事件
    handleChange(name,e) {
        var newState = {};
        console.log(name);
        newState[name] =event.target.value;
        this.setState(newState);
    },
    render: function () {
        return (
            

                

                    

                        標(biāo)題
                        
                    

                    

                        正文
                        
                    
                    


                        
                        
                    
                
            
        )
    }
})


var Main = React.createClass({
    getInitialState: function () {
        return {
            openTheWindow: true
        };
    },
    //開始給子組件一個(gè)回調(diào)函數(shù)，用來(lái)做子組件給父組件通信使用
    buttonResponse:function(windowSatus){
        this.setState({openTheWindow : windowSatus});
    },
    //開始渲染
    render: function () {
        console.log(jsonObj)
        return (
            

                
                

                    

                
            
        );
    }
});
ReactDOM.render(
    
,
    document.getElementById("container")
);

就是這樣，

其實(shí)上邊的代碼是我從之前的沒(méi)事干做的一個(gè)單頁(yè)面上拿過(guò)來(lái)改的，為了不出現(xiàn)代碼無(wú)法運(yùn)行的問(wèn)題，下邊貼出所有代碼：

/**
 * Created by niuGuangzhe on 2016/9/10.
 */
var Jumbotron = React.createClass({
    handleClick: function () {
        this.props.openTheWindow(false);
    },
    render: function () {
        return (
            

                

                    

                        
React+bootstrap簡(jiǎn)單實(shí)例
                    
                
                

                    

                        
上手體驗(yàn)：第一次嘗試組件化開發(fā)
                    
                
                

                    

                        開始體驗(yàn)
                        
                    
                
            
        );
    }
});

var Form = React.createClass({
    getInitialState:function(){
        return {
            inputTitle:"請(qǐng)輸入標(biāo)題",
            mainBody:"在此輸入正文"
        };
    },
    //點(diǎn)擊按鈕觸發(fā)事件：清除所有已經(jīng)輸入的文字
    cleanText:function(){
        this.setState({
            inputTitle:"",
            mainBody:""});
    },
    //表單監(jiān)視事件
    handleChange(name,e) {
        var newState = {};
        console.log(name);
        newState[name] =event.target.value;
        this.setState(newState);
    },
    render: function () {
        return (
            

                
                    

                        標(biāo)題
                        
                    

                    

                        標(biāo)題
                        
                    
                    


                        
                        
                    
                
            
        )
    },
    //監(jiān)測(cè)從新渲染
    componentDidUpdate:function(){
        console.log("子組件重新渲染；");
    }
})

var Question = React.createClass({
    getInitialState : function(){
        return {
            click:true,
            disClick:true
        };
    },
    numberHandle:function(){
        if(this.state.click===true){
            //奇數(shù)次點(diǎn)擊，開始增加數(shù)據(jù)
            this.props.obj.applaud+=1;
            this.setState({click:false});
        }else{
            //偶數(shù)次點(diǎn)擊，減去數(shù)據(jù)
            this.props.obj.applaud-=1;
            this.setState({click:true});
        }
    },
    decreateHandle:function(){
        if(this.state.disClick===true){
            //奇數(shù)次點(diǎn)擊，開始增加數(shù)據(jù)
            this.props.obj.applaud-=1;
            this.setState({disClick:false});
        }else{
            //偶數(shù)次點(diǎn)擊，減去數(shù)據(jù)
            this.props.obj.applaud+=1;
            this.setState({disClick:true});
        }
    },
    render: function () {
        return (
            

                

                    

                        {this.props.obj.applaud-this.props.obj.disagree}

                    
                     
                    

                        
                        
                    
                
                

                    
{this.props.obj.question}
                    
{this.props.obj.TextArea}
                
            
        );
    }
});

var QuestionList=React.createClass({
    prepareToRender:function(list){
        var array=[];
        for(var i=0;i);
        }
        return array;
    },
    render:function(){
        var array=this.prepareToRender(this.props.jsonObj);
        return 
{array}
;
    }
});


//這里模擬出幾條數(shù)據(jù)
var jsonObj=[
    {name:"A",question:"從小被人打怎么辦？",TextArea:"習(xí)慣就好了",applaud:35,disagree:1},
    {name:"B",question:"長(zhǎng)的太帥被人砍怎么辦？",TextArea:"食屎啦你",applaud:35,disagree:10},
    {name:"C",question:"因?yàn)樘直蝗嗣淘趺崔k？",TextArea:"享受就好了",applaud:35,disagree:45},
    {name:"D",question:"被老師打不開心",TextArea:"用錢打ta臉",applaud:35,disagree:6},
    {name:"E",question:"不愛(ài)洗澡怎么辦？",TextArea:"打一頓就好了",applaud:35,disagree:9}
]

var Main = React.createClass({
    getInitialState: function () {
        return {
            openTheWindow: true
        };
    },
    //開始給子組件一個(gè)回調(diào)函數(shù)，用來(lái)做子組件給父組件通信使用
    buttonResponse:function(windowSatus){
        this.setState({openTheWindow : windowSatus});
    },
    //開始渲染
    render: function () {
        console.log(jsonObj)
        return (
            

                
                

                    

                    


                    

                        
                    
                
            
        );
    },
//    執(zhí)行hook函數(shù)：重新渲染完成的時(shí)候調(diào)這個(gè)函數(shù)
    componentDidUpdate:function(){
        console.log(this.state.openTheWindow);
    }
});
ReactDOM.render(
    
,
    document.getElementById("container")
);

最后就是一個(gè)很重要的問(wèn)題：就是多層級(jí)的據(jù)數(shù)據(jù)傳輸，如果還用這個(gè)方式來(lái)傳播的話，效率貌似是個(gè)大問(wèn)題，解決辦法看大家的做法目前暫時(shí)還是flux之類的其他框架，等研究出來(lái)多帶帶寫篇文章吧