react18之 03 类组件与函数组件 之兄弟组件通讯

react18之 03 类组件与函数组件 之兄弟组件通讯

类组件

app.jsx 父组件

import React, { Component } from 'react';
import A from "./A";
import B from "./B";
export default class app extends Component {
 state = {
 }
 componentDidMount() {}
 render(){
   return (
     <div>
      app
      <A></A>
      <B></B>
     </div>
   )
 }
}

A.jsx 子组件

import PubSub from "pubsub-js";
import React, { Component } from 'react';
export default class A extends Component {
 state = {
 }
 componentDidMount() {}
 // 点击按钮的时候 向B组件传递 nameToBPramas 事件 再B组件的componentDidMount函数使用PubSub.subscribe接受
 nameToB = () =>{
  PubSub.publish('nameToBPramas',"我是a组件的name")
 }
 render(){
   return (
     <div>A
      <button onClick={this.nameToB}>向B组件传递name</button>
     </div>
   )
 }
}

B.jsx 子组件

import PubSub from "pubsub-js";
import React, { Component } from 'react';
export default class B extends Component {
 state = {
  name:''
 }
 componentDidMount() {
  PubSub.subscribe('nameToBPramas',(msg,searchName)=>{
    console.log('msg',msg,'searchName',searchName);
    this.setState({
      name:searchName
    })
  })
 }
 render(){
  const { name } = this.state
   return (
     <div>B
      name - {name}
     </div>
   )
 }
}

效果

函数组件

app.jsx

import React, { Component } from 'react';
import A from "./A";
import B from "./B";
export default class app extends Component {
 state = {
 }
 componentDidMount() {}
 render(){
   return (
     <div>
      app
      <A></A>
      <B></B>
     </div>
   )
 }
}

A.jsx

import PubSub from "pubsub-js";
import React from 'react';
export default function A() {
    const changeName = () => {
      PubSub.publish('changeName',{
        name:'我是a组件的name'
      })
    }
    return (
        <div className='content'>
          A组件
          <button onClick={changeName}>changeName</button>
        </div>
    )
}

B.jsx

import PubSub from "pubsub-js";
import React, { useState } from 'react';
export default function B() {
    let [name, setCount] = useState('我是原始b组件的name')
    // 通过 PubSub.subscribe 接受 兄弟组件发布的 changeName方法 接受到数据
    PubSub.subscribe('changeName',(msg, searchName) => { // msg为事件名 searchName为传递的参数
      console.log('msg',msg,'searchName',searchName); // msg changeName searchName {name: '我是a组件的name'}
      setCount(searchName.name)
    })
    return (
        <div className='content'>
          B组件 {name}
        </div>
    )
}

效果