1===》 raect中两个 兄弟组件 互相通信使用的技术
使用 消息订阅(subscribe)和发布(publish)机制 s儿 伯 s rai b pʌ b lɪ ʃ
有一个库可以处理
PubSubJS 它是第三方插件
1)下载 cnpm install pubsub-js -S 我的版本 "pubsub-js": "^1.7.0",2) 在需要使用的组件中引入 import PubSub from "pubsub-js"
// id 声明一个唯一的id,或者标识符,为pubsub-js提供辨识,千万不可重复
// data 第二个参数也可以传递一个对象 它表示传递的内容
PubSub.publish(id, data) 开始发布
PubSub.subscribe(id,callback(message,data){}) 订阅
Numbergo1 .js兄弟组件 可以向Numbergo2 .js组件传递值
import React,{ Component } from "react"
import PubSub from "pubsub-js"
export default class Numbergo1 extends Component {
// 发送消息:PubSub.publish(名称,参数)
state={
listitem:"我是从一个组件的 跑过来的"
}
chuandi=()=>{
PubSub.publish(id,data)
id 声明一个唯一的id,或者标识符,为pubsub-js提供辨识,千万不可重复
data 第二个参数也可以传递一个对象
let {listitem}=this.state 结果
PubSub.publish('mykeyvalue'return (
<div>
<button onClick={this.chuandi}>按钮</button>
</div>
)
}
}
Numbergo2.js
import React,1)"> export class Numbergo2 extends Component { state={ info:"" } 声明周期 组件完成挂载之后 componentDidMount(){ mykeyvalue表示符 msg报错信息 data传递过来的数据 PubSub.subscribe("mykeyvalue",(msg,data)=>{ console.log("从另外一个组件从低过来的数据"this.setState({ info: data }) }) } render() { render使用state中的数据 必须要先解构构 let {info}=.state ( <div> ----{info} </div> ) } }
原文地址:https://www.cnblogs.com/IwishIcould
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。