1，组件通信

在React组件中实现组件之间的通信方式有很多，像父子组件传值，父组件将要传递的参数添加到props 子组件获取props中的值来进行传值子组件传父组件通过父组件传递过来的回调函数来实现传值

例如：

如果D组件需要向E组件传值可以将状态定义子在A组件上分别向BC传递参数，再分别向DE传递参数 D组件可以调用函数改变A中的状态同时也改变了E组件中的props 实现了D向E组件传值这种方法可行但是在项目中如果组件嵌套的更深代码很难维护。

还可放到redux中解决但是如果需求仅仅是实现组件传值显得没那么必要啦

那么我们就用到啦消息订阅与发布机制

2.消息订阅与发布机制

订阅消息

  PubSub.subscribe('clearCount', this.clear)clear = (msgName, data) => {const {count} =datathis.setState({count: count})}

通过PubSub.subscribe()订阅消息第一个参数是订阅的消息名称可以自定义第二个参数是订阅的回调函数这个回调函数有两个参数第一个参数是订阅的消息名称第二个参数是data传过来的数据

发布消息

    PubSub.publish('clearCount',{count:0})

通过PubSub.publish()发布消息，第一个参数为发布的消息名称，第二个参数为发布消息的数据，可以是对象、字符串、数字等类型。

取消订阅

PubSub.unsubscribe(token);

要在合适的时间取消订阅

3.React实现

定义一个A组件发布清零的消息

import React, { Component } from 'react'
import PubSub from 'pubsub-js';
export default class comA extends Component {sendMsg = () => {PubSub.publish('clearCount',{count:0})}render() {return (<div><button onClick={this.sendMsg}>发布消息</button></div>)}
}

定义个一个B组件订阅消息把累计增加的值清零

import React, { Component } from 'react'
import PubSub from 'pubsub-js'
export default class comB extends Component {state = { count: 0 }increment = () => {this.setState({count: this.state.count + 1})}clear = (msgName, data) => {const {count} =datathis.setState({count: count})}componentDidMount() {this.mysub =  PubSub.subscribe('clearCount', this.clear)}componentWillUnmount(){PubSub.unsubscribe(this.mysub)}render() {const { count } = this.statereturn (<div>我是B  计数{count}<button onClick={this.increment}>add</button></div>)}
}

注意在卸载组件的时候取消订阅

React消息订阅与转发机制实现兄弟组件传值相关推荐

React 中的父子组件兄弟组件传值
1.父组件向子组件传值 1.1 我们要明白父组件 --> 子组件是通过props这个属性来传值的父组件 import React from 'react'; import './App.cs ...
React组件通信传值父传子子传父兄弟组件传值
一.父组件传递子组件在父组件中引入子组件,将父组件的state值放到子组件标签中传递,在子组件中用this.props.传值名称,接收父组件代码: import React, { Componen ...
React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件定义一个组件最简单的方式是使用JavaS ...
vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值
父子组件传值: 父组件定义: 代码示例子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...
Vue3 学习笔记 —— 父子组件传值、插槽、提供/注入、兄弟组件传值、mitt
目录 1. 父子组件传值 1.1 父组件给子组件传值 -- v-bind 1.2 子组件接收父组件的传值 -- defineProps 1.3 设置子组件接受参数的默认值 -- withDefault ...
vue3之语法糖script setup的父子组件、兄弟组件传值
背景:随着vue的使用范围越来越广,使用人数越来越多,其的发展更新速度也是再上一个台阶,vue2故好,但组件化过程中的某些组件化操作稍微有一些弊端,从而vue3随之诞生,vue3兼容typescrip ...
Vue组件传值——兄弟组件传值
兄弟组件传值兄弟组件之间彼此没有联系,它们需要通过中间Vue实例对象bus(快递员)进行数据传递. 1. 声明事件给组件实例(或Vue实例) 声明事件有两种方式: 直接声明通过$on实现给组件 ...
vue父子，兄弟组件传值
一.父子组件通讯子组件给父组件传值 1.子组件页面 childA <template><div class="childA"><div>这里是 ...
vue兄弟组件传值的方法
vue兄弟组件传值的方法主要通过event事件来传值: 传值的组件使用$emit发送事件接受值的组件通过$on绑定事件接受第一步创建js文件 test.js import Vue from ' ...

React消息订阅与转发机制实现兄弟组件传值

1，组件通信

2.消息订阅与发布机制

3.React实现

React消息订阅与转发机制实现兄弟组件传值相关推荐

最新文章

热门文章