react中postMessage与addEventListener的使用

react中postMessage与addEventListener的使用有时候两个页面之间不是父子组件的情况下,信息交互很难搞,看到有人用postmessage来进行消息交互,我也试了一下,哎呀妈真香!!!1、首先在需要发送消息的界面中使用postMessage使用的是React+TypeScript,逻辑是更新提交的时候刷新打开当前页面的父窗口,postMessage用法如下:if(window.opener&&window.opener.location&&window.opener.location.href){

大家好,又见面了,我是你们的朋友全栈君。

有时候两个页面之间不是父子组件的情况下,信息交互很难搞,看到有人用postmessage来进行消息交互,我也试了一下,哎呀妈真香!!!

1、首先在需要发送消息的界面中使用postMessage

使用的是React+TypeScript,逻辑是更新提交的时候刷新打开当前页面的父窗口,postMessage用法如下:

if (window.opener && window.opener.location && window.opener.location.href) { 
   
                        let origin = window.opener.location.href;
                        let originStr = origin.substring(origin.length - 21, origin.length);
                        if (origin.indexOf("/tankInfoManage/valve") != -1) { 
   
                            window.opener.postMessage("message", origin)
                        }
                        window.close();
                    }

2、接收消息

window.addEventListener('message', (e) => { 
   
            ref.cuttent?.reload()
            ref.current?.clearSelected()
        });
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/157869.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • wp和uwp_uwp wpf

    wp和uwp_uwp wpf一、异步调用之后,要更新UI时,代码如下二、原来的ApplicationBar更改为CommandBar三、原来在wp8.1中状态栏StatusBar类在UWP中也发生了改变现在要控制UWP状态

    2022年8月5日
    14
  • A. Initial Bet(Codeforces Round #273)

    A. Initial Bet(Codeforces Round #273)

    2022年1月1日
    61
  • 笔记28-MYSQL约束「建议收藏」

    笔记28-MYSQL约束「建议收藏」DQL:查询语句1.排序查询 *语法:orderby子句 *orderby排序字段1排序方式1,排序字段2排序方式2… *排序方式: *ASC:升序,默认的。 *DESC:降序。 *注意: *如果有多个排序条件,则当前边的条件值一样时,才会判断第二条件。2.聚合函数:将一列数据作为一个整体,进行纵向的计算。 1.count:计算个数 1.一般选择非空的列:主键 2.count(*) 2.max:计算最大值 3.

    2022年9月27日
    0
  • 对口计算机一分一档2019河北,最新!2019河北高考一分一档统计表公布![通俗易懂]

    对口计算机一分一档2019河北,最新!2019河北高考一分一档统计表公布![通俗易懂]免费申请学习规划请选择学习阶段学前小学初中高中大学留学其他已为25937位学员提供学习规划*验证码*短信验证码{“text1”:{“label”:”薄弱科目”,”placeholder”:”请输入你的薄弱科目”,”required”:1,”formType”:”text”,”group”:”dynamic”,”name”:”text1″,”type”:”text”,”data”:[]},”cour…

    2022年7月13日
    41
  • MyEclipse 在线安装SVN插件「建议收藏」

    MyEclipse 在线安装SVN插件「建议收藏」今天本想更新下MyEclipse陈旧的SVN插件,随手百度了一下,竟然更新了一个更陈旧的,英语6级的我立马谷歌了官网教程:1.打开MyEclipse,help—>installfromsite—>workwith那行点击add—>输入下面的任意一个网址,如果是第一个网址,会列出 4.2.1,4.3.0,5.0.0等几个版本供选择,第二个网址…

    2022年7月20日
    17
  • idea 2021.11.3激活【最新永久激活】

    (idea 2021.11.3激活)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月28日
    114

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号