react多组件间通讯解决方案实记

星星Star星星

已于 2023-01-14 13:46:50 修改

阅读量161

点赞数

分类专栏： javaweb开发文章标签： react.js 前端前端框架

于 2023-01-14 11:09:29 首次发布

本文链接：https://blog.csdn.net/qq_67602816/article/details/128683009

版权

javaweb开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

场景复现：

react多组件间通讯

在做文章编辑发布的时候，文章各内容均分布于不同的组件，甚至存在于不同的页面，还存在组件销毁问题，想在点击发布的时候拿到其他组件的内容是比较麻烦的
在这里插入图片描述

我最初的解决方案

采用dva简易数据流model对全局数据进行管理

设立全局model

export default {
    namespace: 'write',

    state: {
        content: '',
        title: '',
        category: '',
        description:'',
        isPublic:false,
        coverUrl:''
    },

各组件内同步model状态

if (response.code === 200) {
                dispatch({
                    type: "write/setPostByHand",
                    payload: {
                        coverUrl: response.message
                    }
                });

最终消费成功后重置全局model

if (response.code===200){
                    message.success("发表成功")
                    //清除全局model
                    dispatch({
                        type: "write/cleanPostByHand",
                    })
                    history.push(`home`)
                }else{
                    message.error("系统错误，请联系小星")
                }