今天总结一下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<list.length;i++){
array.push(<Question obj={list[i]} key={i}/>);
}
return array;
},
render:function(){
var array=this.prepareToRender(this.props.jsonObj);
return <div>{array}</div>;
}
});
var Main = React.createClass({
//开始渲染
render: function () {
return (
<div>
<div className="container col-md-6 col-md-offset-3">
<div className="container-fluid">
<QuestionList jsonObj={jsonObj} />
</div>
</div>
);
}
});
ReactDOM.render(
<Main />,
document.getElementById('container')
);
代码写的不怎么规范,但是数据的传递就是这样的:
<QuestionList jsonObj={jsonObj} />
这样就可以把父组件的数据带到子组件里边
数据从子组件到父组件
理论上来说数据只能是单向的,所以不借助插件数据还真不好从子组件到父组件,一种很简单的手段是回调函数:
在父组件当中写个回调函数,然后传递到子组件,什么时候子组件数据变化了,直接调这个回调函数就可以了。