ReactJS组件之间如何进行通信

最近在学习react.js，不得不说***次接触组件化开发很神奇，当然也很不习惯。

成都创新互联是一家专注于网站设计制作、成都做网站与策划设计,连云港网站建设哪家好?成都创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:连云港等地区。连云港做网站价格咨询:13518219792

react的思想还是蛮独特的，当然围绕react的一系列自动化工具也是让我感觉亚历山大

今天总结一下react组件之间的通信，权当是自己的学习笔记：

reactJs中数据流向的的特点是：单项数据流

react组件之间的组合不知道为什么给我一种数据结构当中树的感觉，数据就是从根节点(顶端或其他子树的顶端)“流”下来，大概就是这个样子：

比如这是一个组件树，数据就可以从main组件流到jumbotron组件、queationList组件、form组件，类似的queation组件的数据也可以流到下边的question组件里边。

但是很遗憾，这个从上到下的数据流动，只能解决很少的问题，还有一部分的数据流动就是类似从jumbotron组件到form组件的这样的兄弟组件的流动形式，或者隔着几个层级的数据流动，再或者子组件发生了数据的变化，想通知父组件，数据流向从子组件到父组件流，这些问题才是大多数的开发者需要面临的问题。所以这篇笔记总结下基础的组件通信：

数据从父组件到子组件

最简单的通信就是父子间的通信，比如上边图上的有个jsonObj从main流进了QueationList参考代码：

 
 
  
  //这里模拟出几条数据 
  
  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:"用钱打脸",applaud:35,disagree:6}, 
  
      {name:"E",question:"不爱洗澡怎么办？",TextArea:"打一顿就好了",applaud:35,disagree:9} 
  
  ] 
  
   
  
  var QuestionList=React.createClass({ 
  
      prepareToRender:function(list){ 
  
          var array=[]; 
  
          for(var i=0;i
  
  
            array.push(); 
  
          } 
  
          return array; 
  
      }, 
  
      render:function(){ 
  
          var array=this.prepareToRender(this.props.jsonObj); 
  
          return {array}
; 
  
      } 
  
  }); 
  
  var Main = React.createClass({ 
  
      //开始渲染 
  
      render: function () { 
  
          return (

理论上来说数据只能是单向的，所以不借助插件数据还真不好从子组件到父组件，一种很简单的手段是回调函数：

在父组件当中写个回调函数，然后传递到子组件，什么时候子组件数据变化了，直接调这个回调函数就可以了。

比如现在的jumbotron的按钮被点击了，我们想把被点击这个事件发给它的父组件也就是main组件，那么我们可以这个做：

var Jumbotron = React.createClass({
handleClick: function () {
this.props.openTheWindow(false);
},
render: function () {
return (
开始体验

/**
* 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}
className="glyphicon glyphicon-chevron-up">
className="glyphicon glyphicon-chevron-down">
{this.props.obj.question}
{this.props.obj.TextArea}
);
}
});
var QuestionList=React.createClass({
prepareToRender:function(list){
var array=[];
for(var i=0;i
array.push();
}
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')
);

ReactJS组件之间如何进行通信

{this.props.obj.question}