ReactJS组件之间怎样进行通信

今天总结一下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} />

这样就可以把父组件的数据带到子组件里边

数据从子组件到父组件

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

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

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!