React项目组件间通讯方式简介

一、父组件给子组件传递数据 props

//父组件App
import { Component } from 'react';
import axios from 'axios'
import PubSub from 'pubsub-js'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css';

export default class App extends Component{
 
  render(){
    return (
      <div className="App">
        <Header userName='小飞侠'/>
        <List   />
        <Footer />
      </div>
    );
  }
}
//子组件Header 
import React,{ Component } from "react";
import { nanoid } from "nanoid";//生成唯一id库
import  "./index.css";
export default class Header extends Component{
  
    render(){
        return(
            <div>
                 <span>{this.props.userName}</span>
            </div>
        )
    }
}

二、子组件给父组件传递数据 通过函数调用的方式

//父组件App
import { Component } from 'react';
import axios from 'axios'
import PubSub from 'pubsub-js'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css';

export default class App extends Component{
   //向子组件传递一个函数 通过参数来获取子组件的数据
   addUserName  =  (name)=>{
      console.log(name)
    })
  }
  render(){
    return (
      <div className="App">
        <Header userName='小飞侠'/>
        <List  addUserName = {this.addUserName }  />
        <Footer   />
      </div>
    );
  }
}
//子组件List  
import React,{ Component } from "react";
import { nanoid } from "nanoid";//生成唯一id库
import  "./index.css";
export default class List  extends Component{
   this.props.addUserName ('凌风')
    render(){
        return(
            <div>
                 <span>1111</span>
            </div>
        )
    }
}

三、兄弟组件传递数据 pubsub-js(消息订阅与发布机制)

1. 安装插件

  npm i pubsub-js 安装插件

2. 在需要使用的组件页面引入插件

  import PubSub from 'pubsub-js'

3. 在需要获取数据的兄弟组件A中订阅消息

  通过 PubSub.subscribe('MY TOPIC', (msg,data)=>{})来订阅消息
  // MY TOPIC 为订阅消息的名称 , msg为消息名称可用_代替,data为接收到的数据

4. 在将要发布数据的兄弟组件B中发布数据

  通过 PubSub.publish('MY TOPIC', 'hello world!');来发布数据
   // MY TOPIC 为发布消息的名称(必须和订阅消息名称一致) , hello world!为发布出去的数据

5.使用如下:

 //兄弟组件A  订阅消息
import { Component } from 'react';
import axios from 'axios'
import PubSub from 'pubsub-js'

export default class App extends Component{
componentDidMount(){
     //订阅消息  fabu001 为订阅消息名称  data为获取到的来自兄弟组件B发布的数据
    PubSub.subscribe('fabu001',(_,data)=>{
        console.log(data)
    })
 }
  render(){
    return (
      <div>
          <span>我是兄弟组件A</span>
      </div>
    );
  }
}

 //兄弟组件B 发布消息
import { Component } from 'react';
import axios from 'axios'
import PubSub from 'pubsub-js'

export default class App extends Component{
   componentDidMount(){
       //发布数据将数据传递给兄弟组件A  
       //fabu001为消息名称 必须和订阅的消息名称一致
      //hello world! 为传递给兄弟组件A组件的数据
       PubSub.publish('fabu001', 'hello world!');
    }
  render(){
    return (
      <div>
          <b>我是兄弟组件B</b>
      </div>
    );
  }
}