react子组件向父组件通信

最近在整理了一下长满灰的尘印象笔记,发现之前摘录的一篇文章:)

React 是以组合组件的形式组织的,组件因为彼此是相互独立的,从传递信息的内容上看,

几乎所有类型的信息都可以实现传递,例如字符串、数组、对象、方法或自定义组件等。所以,

在嵌套关系上,就会有 3 种不同的可能性:父组件向子组件通信(最常见的方式)、子组件向父组件通信和没有嵌套关系的组件之间通信


在用 React 之前的组件开发模式时,常常需要接收组件运行时的状态,这时我们常用的方法

有以下两种。

1、利用回调函数:这是 JavaScript 灵活方便之处,这样就可以拿到运行时状态。

2、 利用自定义事件机制:这种方法更通用,使用也更广泛。设计组件时,考虑加入事件机

制往往可以达到简化组件 API 的目的。

在 React 中,子组件向父组件通信可以使用上面的任意一种方法,但在这种简单的场景下利

用自定义事件显然过于复杂,为了达到目的,一般会选择较为简单的方法。

例子如下:现在有app.jsx、list.jsx和 listItem.jsx三个组件,

list.jsx和 listItem.jsx组件分别如下,并要求勾选动作触发后把选中的项暴露出来

在上述例子中,我们在 List 组件中构造了 handleItemChange 方法,这样在使用 List 组件时,

就可以在运行时拿到改变的项对应的值。比如:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 组件间数据通信的单向性 React组件之间的是彼此独立的,组件间的数据流动是单向的,父组件向子组件通信是最常...
    何幻阅读 7,831评论 0 3
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,126评论 25 709
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,863评论 1 18
  • 我试图成为一个成年人,但是失败了 一番洗漱过后,已是接近午夜时分,已是接近午夜时间了,我依靠在床边,扭动着酸痛的脖...
    青一草阅读 362评论 0 0
  • 讲述了母狼紫岚为了培养黑仔成为狼王,把其中的一只冻死的小狼不忍心吃掉,才养活了其它小狼。
    28bfbf5be1ea阅读 3,288评论 0 2