ReactJS组件之间通信

子组件通知父组件状态变化就是这样，就好像是儿子找爸爸要零花钱，零花钱以及给不给都是爸爸说了算的。

这个其实应该是一个动态应用中最常见的通信，比如jubotron组件的点击按钮，form组件的表单出现：
这就是一个典型的兄弟之间的通信：

兄弟节点其实可以就是子父通信&&父子通信的叠加
首先按钮被点击，子组件通知负组件这个事件，然后父组件把这个消息带给另一个子组件
下边是个点击按钮显示表单的例子：

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

                

                    

                        开始体验
                        
                    
                
            
        );
    }
});

var Form = React.createClass({
    getInitialState:function(){
        return {
            inputTitle:"请输入标题",
            mainBody:"在此输入正文"
        };
    },
    //点击按钮触发事件：清除所有已经输入的文字
    cleanText:function(){
        this.setState({
            inputTitle:"",
            mainBody:""});
    },
    //表单监视事件
    handleChange(name,e) {
        var newState = {};
        console.log(name);
        newState[name] =event.target.value;
        this.setState(newState);
    },
    render: function () {
        return (
            

                

                    

                        标题
                        
                    

                    

                        正文
                        
                    
                    


                        
                        
                    
                
            
        )
    }
})


var Main = React.createClass({
    getInitialState: function () {
        return {
            openTheWindow: true
        };
    },
    //开始给子组件一个回调函数，用来做子组件给父组件通信使用
    buttonResponse:function(windowSatus){
        this.setState({openTheWindow : windowSatus});
    },
    //开始渲染
    render: function () {
        console.log(jsonObj)
        return (
            

                
                

                    

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

就是这样，

其实上边的代码是我从之前的没事干做的一个单页面上拿过来改的，为了不出现代码无法运行的问题，下边贴出所有代码：

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

                

                    

                        
React+bootstrap简单实例
                    
                
                

                    

                        
上手体验：第一次尝试组件化开发
                    
                
                

                    

                        开始体验
                        
                    
                
            
        );
    }
});

var Form = React.createClass({
    getInitialState:function(){
        return {
            inputTitle:"请输入标题",
            mainBody:"在此输入正文"
        };
    },
    //点击按钮触发事件：清除所有已经输入的文字
    cleanText:function(){
        this.setState({
            inputTitle:"",
            mainBody:""});
    },
    //表单监视事件
    handleChange(name,e) {
        var newState = {};
        console.log(name);
        newState[name] =event.target.value;
        this.setState(newState);
    },
    render: function () {
        return (
            

                
                    

                        标题
                        
                    

                    

                        标题
                        
                    
                    


                        
                        
                    
                
            
        )
    },
    //监测从新渲染
    componentDidUpdate:function(){
        console.log("子组件重新渲染；");
    }
})

var Question = React.createClass({
    getInitialState : function(){
        return {
            click:true,
            disClick:true
        };
    },
    numberHandle:function(){
        if(this.state.click===true){
            //奇数次点击，开始增加数据
            this.props.obj.applaud+=1;
            this.setState({click:false});
        }else{
            //偶数次点击，减去数据
            this.props.obj.applaud-=1;
            this.setState({click:true});
        }
    },
    decreateHandle:function(){
        if(this.state.disClick===true){
            //奇数次点击，开始增加数据
            this.props.obj.applaud-=1;
            this.setState({disClick:false});
        }else{
            //偶数次点击，减去数据
            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}
;
    }
});


//这里模拟出几条数据
var jsonObj=[
    {name:"A",question:"从小被人打怎么办？",TextArea:"习惯就好了",applaud:35,disagree:1},
    {name:"B",question:"长的太帅被人砍怎么办？",TextArea:"食屎啦你",applaud:35,disagree:10},
    {name:"C",question:"因为太胖被人摸奶怎么办？",TextArea:"享受就好了",applaud:35,disagree:45},
    {name:"D",question:"被老师打不开心",TextArea:"用钱打ta脸",applaud:35,disagree:6},
    {name:"E",question:"不爱洗澡怎么办？",TextArea:"打一顿就好了",applaud:35,disagree:9}
]

var Main = React.createClass({
    getInitialState: function () {
        return {
            openTheWindow: true
        };
    },
    //开始给子组件一个回调函数，用来做子组件给父组件通信使用
    buttonResponse:function(windowSatus){
        this.setState({openTheWindow : windowSatus});
    },
    //开始渲染
    render: function () {
        console.log(jsonObj)
        return (
            

                
                

                    

                    


                    

                        
                    
                
            
        );
    },
//    执行hook函数：重新渲染完成的时候调这个函数
    componentDidUpdate:function(){
        console.log(this.state.openTheWindow);
    }
});
ReactDOM.render(
    
,
    document.getElementById("container")
);

最后就是一个很重要的问题：就是多层级的据数据传输，如果还用这个方式来传播的话，效率貌似是个大问题，解决办法看大家的做法目前暂时还是flux之类的其他框架，等研究出来多带带写篇文章吧