1、组件传值之父传子
文章图片
先看演示，react里面的父子组件传值可以通过props来实现达到修改子组件里面的值
父组件代码：
文章图片
文章图片
文章图片
【React|React组件通信（父传子、子传父、兄弟传值）】通过props可以实现在子组件里面接收父组件的值，修改父组件的值，可以实现修改子组件里面的值
2、组件传值之子传父
看演示：
文章图片
子传父也是通过props来实现的，父组件通过props传递一个能修改自身数据的函数给子组件，子组件接收该函数，并且执行该函数，就可以实现子组件通信父组件的效果。
父组件修改自身数据函数：
文章图片
子组件通过props接收父元素的方法
文章图片
子组件执行传递过来的函数：
文章图片
3、组件通信之兄弟相传
看演示：
文章图片
兄弟之间传值需要借助node自带的模块EventEmitter：
1、组件二触发修改修改组件一里面的值的事件，并且传递参数
文章图片
2、组件一监听该事件
文章图片
3、当两个组件被拆分后，需要将EventEmitter抽离出来，在组件一和组件二里面分别引入
文章图片
react的组件通信还包含：父子组件的ref方式，以及兄弟组件的中间人（共同父组件）的方法，上述的方法是比较常用也比较简单的方法。
推荐阅读
- 前端|面试官（谈谈Vue和React的区别（））
- react|高德地图的使用及自定义图标
- React|【React Native开发】React Native控件之RefreshControl组件详解(21)
- React|React Native开源项目-嘎嘎商城客户端(持续更新中)
- 工作与生活|2016总结,真正新的里程碑和新起点
- React|【React Native开发】React Native应用设备运行(Running)以及调试(Debugging)(3)
- React|【React Native开发】React Native控件之ListView组件讲解以及最齐全实例(19)
- React|React Native控件之PullToRefreshViewAndroid下拉刷新组件讲解(20)
- React|【React Native开发】React Native控件之Text组件讲解(9)
- react学习之旅|react+antd-mobile之项目构建+基础配置