React组件间的通信

1. 通过props传递:

  1. 共同的数据放在父组件上,特有的数据放在自己组件内部的state上。
  2. 通过props可以传递一般数据和函数数据,只能一层一层传递。
  3. 一般数据 -> 父组件传递数据给子组件 -> 子组件读取数据
  4. 函数数据 -> 子组件传递数据给父组件 -> 子组件调用函数

2. 使用消息订阅(subscribe)-发布(publish)机制

工具库:PubSubJS
安装PubSubJS

npm install --save pubsub-js

之后在程序中引入:

import PubSub from 'pubsub-js'

发布消息:

PubSub.publish('search', searchName)

'search'相当于订阅的键。接收方通过这个键接收数据。searchName是传递的数据。

接收方组件接收消息:

PubSub.subscribe('search', function (msg, searchName) {
    console.log(msg, searchName)
}

接收方通过'search'接收数据。msg代表'search',searchName是发布方封装的数据传递到了接收方。

通过redux

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

推荐阅读更多精彩内容