react 兄弟组件传值(发布订阅,使用于任何组件传值,包括vue)

2023-07-10,,

react中兄弟组件传值常规操作一般是,A组件传给父组件,父组件再传给B组件

非常规操作 利用  pubsub-js

在Home组件内调用 PubSub.publish("第一个参数是事件名", 第二个参数是要传递的数据);

 1 import React, { Component } from 'react';
2
3 import PubSub from "pubsub-js";
4
5 class Home extends Component {
6 constructor(props) {
7 super(props)
8 this.state = {
9 msg: "熊的传值的数据"
10 }
11 }
12 render() {
13 return (
14 <div>
15 首页传值
16 <button onClick={() => {this.send()}}>点击发送</button>
17 </div>
18 );
19 }
20 send = () => {
21 //PubSub.publish向外定义方法名 第一个参数是方法名,第二个参数是传递的数据
22 PubSub.publish("methodName", this.state.msg);
23 }
24 }
25
26 export default Home;

在兄弟User组件内调用   PubSub.subscribe("methodName", (msg, data) => { }) }

    第一个参数是传递过来的时间名,第二个参数是一个函数: 第一个形参是事件名,第二个形参是传递过来的数据

 1 import React, { Component } from "react";
2
3 import PubSub from "pubsub-js";
4
5 console.log(PubSub)
6
7 class User extends Component {
8 constructor(props) {
9 super(props);
10 this.state = {12 value: "",
13 };
14 // 使用PubSub.subscribe接收数据(第一个参数是方法名,)
15 PubSub.subscribe("methodName", (msg, data) => {
16 console.log(data, "pppp");
17 // this.setState({ text: data });
18 this.setState({
19 value: data,
20 });
21 });
22 }
23
24 render() {
25 return (
26 <div>
27 用户页接收------- {this.state.value}
29 </div>
30 );
31 }
32
33 getchangevalue = () => {
34
35 }
36 }
37
38 export default User;

react 兄弟组件传值(发布订阅,使用于任何组件传值,包括vue)的相关教程结束。

《react 兄弟组件传值(发布订阅,使用于任何组件传值,包括vue).doc》

下载本文的Word格式文档,以方便收藏与打印。