最近在整理了一下长满灰的尘印象笔记,发现之前摘录的一篇文章:)
React 是以组合组件的形式组织的,组件因为彼此是相互独立的,从传递信息的内容上看,
几乎所有类型的信息都可以实现传递,例如字符串、数组、对象、方法或自定义组件等。所以,
在嵌套关系上,就会有 3 种不同的可能性:父组件向子组件通信(最常见的方式)、子组件向父组件通信和没有嵌套关系的组件之间通信。
在用 React 之前的组件开发模式时,常常需要接收组件运行时的状态,这时我们常用的方法
有以下两种。
1、利用回调函数:这是 JavaScript 灵活方便之处,这样就可以拿到运行时状态。
2、 利用自定义事件机制:这种方法更通用,使用也更广泛。设计组件时,考虑加入事件机
制往往可以达到简化组件 API 的目的。
在 React 中,子组件向父组件通信可以使用上面的任意一种方法,但在这种简单的场景下利
用自定义事件显然过于复杂,为了达到目的,一般会选择较为简单的方法。
例子如下:现在有app.jsx、list.jsx和 listItem.jsx三个组件,
list.jsx和 listItem.jsx组件分别如下,并要求勾选动作触发后把选中的项暴露出来
在上述例子中,我们在 List 组件中构造了 handleItemChange 方法,这样在使用 List 组件时,
就可以在运行时拿到改变的项对应的值。比如: