精华内容
下载资源
问答
  • 2018-10-23 22:42:08

    在html代码与引入的layui正确的情况下,layui.open有时候会出现form.render()渲染无效的情况,
    这时候可以通过获取新窗口的对象来通过form.render()重新渲染

    var indexTpl = layui.layer.open({
                title: name,
                type: 2,
                content: url,
                maxmin: true,
                area: ['60%', '90%'],
                success: function (layero, index) {
                    	// 新iframe窗口的对象
                        var iframeWin = layero.find('iframe')[0].contentWindow;
                        // 重新渲染checkbox,select同理
                        iframeWin.layui.form.render('checkbox');
                },
            });
    

    这样就可以解决form.render()渲染无效的情况了。

    更多相关内容
  • 多窗口页面实现之window.open和iframe

    千次阅读 2018-07-13 15:41:30
    复杂的项目开发,是避免不了多窗口的window.open使用和iframe的使用的,如下简单介绍这两种多窗口页面实现方式:   1、window.open方法 open() 方法用于打开一个的浏览器窗口或查找一个已命名的窗口。 语法:...

    复杂的项目开发,是避免不了多窗口的window.open使用和iframe的使用的,如下简单介绍这两种多窗口页面实现方式:

     

    1、window.open方法

    open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

    语法:

    window.open(URL,target,specs,replace)

    参数:

    URL:  可选。打开指定的页面的URL。如果没有指定URL,打开一个新的空白窗口。

    target:  可选。指定target属性或窗口的名称。支持以下值:

    specs(abbr: specifications,规格、说明书):  可选。一个逗号分隔的项目列表。支持以下值: width=pixels,height=pixels,fullscreen=yes|no|1|0 ......

    replace:规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。

     

    用法一:在当前浏览器打开一个新的窗口

     window.open("http://www.runoob.com");
    等价于:
    超链接<a href="//www.jb51.net" title="脚本之家" target="_blank">Welcome</a>

    用法二:在一个新的浏览器打开一个新的窗口

        myWindow=window.open('','','width=200,height=100');
        myWindow.document.write("<p>这是'我的窗口'</p>");
        myWindow.focus();

     

    2、iframe标签

    <iframe> 标签规定一个内联框架。

    一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。这个文档可以是HTML文档,IMG等资源。

    iframe 用于在网页内显示网页。

    所有主流浏览器都支持 <iframe> 标签。

    您可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对不支持 <iframe> 的浏览器。

    通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。

     

    iframe 的优缺点

    优点:

      重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少数据的传输,减少网页的加载时间);

      技术简单,使用方便,主要应用于不需要搜索引擎来搜索的页面;

      方便开发,减少代码的重复率(比如页面的header,footer);

    缺点:

      会产生很多的页面,不易于管理;

      不易打印;

      多框架的页面会增加服务器的http请求;

      浏览器的后退按钮无效等;

    展开全文
  • react.js怎么实现刷新当前页面

    千次阅读 2020-12-22 12:31:31
    关于“react.js怎么实现刷新当前页面”这个问题,我认为:window.open之后,子页面关闭之前刷新子页面,目前测试过的刷新方法:1.1 window.opener.location.reload(); 该方式使用时会提示你是否确定刷新,比较烦人。1.2 ...

    关于“react.js怎么实现刷新当前页面”这个问题,我认为:

    window.open之后,子页面关闭之前刷新子页面,目前测试过的刷新方法:

    1.1 window.opener.location.reload(); 该方式使用时会提示你是否确定刷新,比较烦人。

    1.2 window.opener.location.href=window.opener.location.href; 该方

    1原文链接:http://caibaojian.com/javascript-refresh-page.htmlreload 方法,该方法强迫浏览器刷新当前页面。·

    2 语法:location.reload([bForceGet])       参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新。

    3 replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的U。

    4 在实际应用的时候,重新刷新页面的时候,我们通常使用: location.reload() 或者是 history.go(0) 来做。因为这种做法就像是客户端点F5刷新页面,所以页面的method="post"的时候,会出现"网页过期"的提示。那是因为Session的安全保护机制。

    {"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":2,"count":2}]},"card":[{"des":"打造能感知、可交互、会思考、自进化的“智能公厕”,实现对公厕环境、资源、设施、安保的智能治理,提高公厕建设质量,健全公厕管理体制,提升厕所文明水平,让市民“方便”更方便。","link1":"https://www.aliyun.com/solution/iot/toilets","link":"https://www.aliyun.com/solution/iot/toilets","icon":"https://img.alicdn.com/tfs/TB1V1raevb2gK0jSZK9XXaEgFXa-200-200.png","btn2":"立即咨询","tip":"更多优质解决方案 立即查看 立即咨询","btn1":"方案详情","link2":"https://page.aliyun.com/form/act1400415011/index.htm","title":"智慧厕所解决方案"}],"search":[{"txt":"智慧厕所","link":"https://www.aliyun.com/solution/iot/toilets"},{"txt":"智慧厕所解决方案","link":"https://www.aliyun.com/solution/iot/toilets"}],"countinfo":{"search":{"length_pc":0,"length":0},"card":{"length_pc":0,"length":0}}}

    {"$env":{"JSON":{}},"$page":{"env":"production"},"$context":{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":2,"count":2}]},"card":[{"des":"打造能感知、可交互、会思考、自进化的“智能公厕”,实现对公厕环境、资源、设施、安保的智能治理,提高公厕建设质量,健全公厕管理体制,提升厕所文明水平,让市民“方便”更方便。","link1":"https://www.aliyun.com/solution/iot/toilets","link":"https://www.aliyun.com/solution/iot/toilets","icon":"https://img.alicdn.com/tfs/TB1V1raevb2gK0jSZK9XXaEgFXa-200-200.png","btn2":"立即咨询","tip":"更多优质解决方案 立即查看 立即咨询","btn1":"方案详情","link2":"https://page.aliyun.com/form/act1400415011/index.htm","title":"智慧厕所解决方案"}],"search":[{"txt":"智慧厕所","link":"https://www.aliyun.com/solution/iot/toilets"},{"txt":"智慧厕所解决方案","link":"https://www.aliyun.com/solution/iot/toilets"}],"countinfo":{"search":{"length_pc":0,"length":0},"card":{"length_pc":0,"length":0}}}}

    {"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里技术人对外发布原创技术内容的最大平台;社区覆盖了云计算、大数据、人工智能、IoT、云原生、数据库、微服务、安全、开发与运维9大技术领域。","link1":"https://developer.aliyun.com/group/?spm=a2c6h.12883283.1377930.25.7287201c9RKTCi&groupType=other","link":"https://developer.aliyun.com/","icon":"https://img.alicdn.com/tfs/TB1TlXBEkT2gK0jSZPcXXcKkpXa-200-200.png","btn2":"开发者藏经阁","tip":"打通开发者成长路径,学习中心 。全线阿里云技术大牛公开课,立即查看","btn1":"技术与产品技术圈","link2":"https://developer.aliyun.com/topic/ebook?spm=a2c6h.12883283.1362932.15.7287201c9RKTCi","title":"阿里云开发者社区"}],"search":[{"txt":"学习中心","link":"https://developer.aliyun.com/learning?spm=a2c6h.13788135.1364563.41.299f5f24exe3IS"},{"txt":"技能测试中心 ","link":"https://developer.aliyun.com/exam?spm=a2c6h.13716002.1364563.42.6cac18a3JWCM5U"},{"txt":"开发者云 ","link":"https://developer.aliyun.com/adc/?spm=a2c6h.13716002.1364563.59.6b0818a3DV0vzN"},{"txt":"在线编程 ","link":"https://developer.aliyun.com/coding?spm=5176.13257455.1364563.57.701e7facHvqi5r"},{"txt":"学习中心 ","link":"https://developer.aliyun.com/learning?spm=a2c6h.12883283.1364563.41.5f1f201c5CLDCC"},{"txt":"高校计划 ","link":"https://developer.aliyun.com/adc/college/?spm=a2c6h.13716002.1364563.58.6cac18a3JWCM5U"}],"countinfo":{"search":{"length_pc":0,"length":0},"card":{"length_pc":0,"length":0}}}

    {"$env":{"JSON":{}},"$page":{"env":"production"},"$context":{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里技术人对外发布原创技术内容的最大平台;社区覆盖了云计算、大数据、人工智能、IoT、云原生、数据库、微服务、安全、开发与运维9大技术领域。","link1":"https://developer.aliyun.com/group/?spm=a2c6h.12883283.1377930.25.7287201c9RKTCi&groupType=other","link":"https://developer.aliyun.com/","icon":"https://img.alicdn.com/tfs/TB1TlXBEkT2gK0jSZPcXXcKkpXa-200-200.png","btn2":"开发者藏经阁","tip":"打通开发者成长路径,学习中心 。全线阿里云技术大牛公开课,立即查看","btn1":"技术与产品技术圈","link2":"https://developer.aliyun.com/topic/ebook?spm=a2c6h.12883283.1362932.15.7287201c9RKTCi","title":"阿里云开发者社区"}],"search":[{"txt":"学习中心","link":"https://developer.aliyun.com/learning?spm=a2c6h.13788135.1364563.41.299f5f24exe3IS"},{"txt":"技能测试中心 ","link":"https://developer.aliyun.com/exam?spm=a2c6h.13716002.1364563.42.6cac18a3JWCM5U"},{"txt":"开发者云 ","link":"https://developer.aliyun.com/adc/?spm=a2c6h.13716002.1364563.59.6b0818a3DV0vzN"},{"txt":"在线编程 ","link":"https://developer.aliyun.com/coding?spm=5176.13257455.1364563.57.701e7facHvqi5r"},{"txt":"学习中心 ","link":"https://developer.aliyun.com/learning?spm=a2c6h.12883283.1364563.41.5f1f201c5CLDCC"},{"txt":"高校计划 ","link":"https://developer.aliyun.com/adc/college/?spm=a2c6h.13716002.1364563.58.6cac18a3JWCM5U"}],"countinfo":{"search":{"length_pc":0,"length":0},"card":{"length_pc":0,"length":0}}}}

    {"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"适用于初创型物联网企业,提供消息通信数、设备连接时长、设备数据存储。满足设备基础运行需求,轻量化接入。【体验版-消息通信数(每月)10万条;设备连接时长(每月)10万分钟;设备数据存储(每月)1G】","link1":"https://common-buy.aliyun.com/?commodityCode=iot_packagesmall_pre&request=%7B%22package_type%22:%22basic%22,%22purchase_num%22:1,%22ord_time%22:%221:Year%22%7D","link":"https://www.aliyun.com/product/bgp_new","icon":"https://img.alicdn.com/tfs/TB1sG.lorY1gK0jSZTEXXXDQVXa-200-200.png","btn2":"轻量版","tip":"预付费支持多套餐购买,额度累加计算。 一键登录物联网平台控制台","btn1":"体验版","link2":"https://common-buy.aliyun.com/?commodityCode=iot_packagesmall_pre&request=%7B%22package_type%22:%22standard%22,%22purchase_num%22:1,%22ord_time%22:%221:Year%22%7D","title":"物联网平台小规格套餐包"}],"search":[{"txt":"物联网平台资源包-消息通信","link":"https://common-buy.aliyun.com/?spm=a2c56.13013782.1371428.1.5ec052e7KSJigZ&commodityCode=iot_resource_bag#/buy"},{"txt":"物联网平台资源包-连接时长","link":"https://common-buy.aliyun.com/?commodityCode=iot_resource_bag&request=%7B%22pack%22:%22FPT_iot_resource_bag_periodMonthlyAcc_1561098756%22,%22devconnect_spec%22:1000,%22ord_time%22:%221:Month%22%7D"},{"txt":"设备身份认证服务ID²","link":"https://common-buy.aliyun.com/?commodityCode=id2_license&request=%7B%22region%22:%22cn-shanghai%22,%22spec%22:%22small%22,%22product_name%22:%22__NEW_PRODUCT__%22,%22order_num%22:1,%22ord_time%22:%225:Year%22%7D"},{}],"countinfo":{"search":{"length_pc":0,"length":0},"card":{"length_pc":0,"length":0}},"$tmsId":"tce/2243198"}

    {"optioninfo":{"dynamic":"true","static":"true"},"simplifiedDisplay":"newEdition","newCard":[{"link":"https://www.aliyun.com/product/mqc","icon":"mqc","title":"移动测试","des":"为企业客户和移动开发者提供真机测试服务的云平台,拥有大量热门机型,提供7x24全天候服务,帮助客户发现App中的各类隐患(应用崩溃、各类兼容性问题、功能性问题、性能问题等),减少用户流失,提高App质量和市场竞争力。","btn1":"产品详情","link1":"https://www.aliyun.com/product/mqc","btn2":"专家测试服务","link2":"https://www.aliyun.com/service/mobiletesting","btn3":"最新活动","link3":"https://www.aliyun.com/activity/emas/emas_promotion","infoGroup":[{"infoName":"产品文档","infoContent":{"firstContentName":"什么是移动测试","firstContentLink":"https://help.aliyun.com/document_detail/93530.html","lastContentLink":"https://help.aliyun.com/knowledge_detail/57132.html","lastContentName":"功能特性"}},{"infoName":"用户指南","infoContent":{"firstContentName":"Android测试","firstContentLink":"https://help.aliyun.com/document_detail/169881.html","lastContentName":"iOS测试","lastContentLink":"https://help.aliyun.com/document_detail/112018.html"}},{"infoName":"常见问题","infoContent":{"firstContentName":"产品相关问题","firstContentLink":"https://help.aliyun.com/document_detail/171153.html","lastContentName":"技术相关问题","lastContentLink":"https://help.aliyun.com/document_detail/171156.html"}},{"infoName":"技术支持","infoContent":{"firstContentName":"钉钉官方答疑群","firstContentLink":"https://help.aliyun.com/document_detail/67284.html"}}]}],"card":[],"search":[],"infoCard":[],"title":{"mainTitle":"","subtitle":"","linkUrl":"","btnText":""},"visual":{"topbg":"https://img.alicdn.com/tfs/TB1EJ1xJkL0gK0jSZFxXXXWHVXa-1740-328.jpg","icon":"dbl-icon-product-mqc","textColor":"light"},"dataList":[],"sceneCard":[],"txt":[{"title":"适用场景","scenariosone":[]}]}

    {"$env":{"JSON":{}},"$page":{"env":"production"},"$context":{"optioninfo":{"dynamic":"true","static":"true"},"simplifiedDisplay":"newEdition","newCard":[{"link":"https://www.aliyun.com/product/mqc","icon":"mqc","title":"移动测试","des":"为企业客户和移动开发者提供真机测试服务的云平台,拥有大量热门机型,提供7x24全天候服务,帮助客户发现App中的各类隐患(应用崩溃、各类兼容性问题、功能性问题、性能问题等),减少用户流失,提高App质量和市场竞争力。","btn1":"产品详情","link1":"https://www.aliyun.com/product/mqc","btn2":"专家测试服务","link2":"https://www.aliyun.com/service/mobiletesting","btn3":"最新活动","link3":"https://www.aliyun.com/activity/emas/emas_promotion","infoGroup":[{"infoName":"产品文档","infoContent":{"firstContentName":"什么是移动测试","firstContentLink":"https://help.aliyun.com/document_detail/93530.html","lastContentLink":"https://help.aliyun.com/knowledge_detail/57132.html","lastContentName":"功能特性"}},{"infoName":"用户指南","infoContent":{"firstContentName":"Android测试","firstContentLink":"https://help.aliyun.com/document_detail/169881.html","lastContentName":"iOS测试","lastContentLink":"https://help.aliyun.com/document_detail/112018.html"}},{"infoName":"常见问题","infoContent":{"firstContentName":"产品相关问题","firstContentLink":"https://help.aliyun.com/document_detail/171153.html","lastContentName":"技术相关问题","lastContentLink":"https://help.aliyun.com/document_detail/171156.html"}},{"infoName":"技术支持","infoContent":{"firstContentName":"钉钉官方答疑群","firstContentLink":"https://help.aliyun.com/document_detail/67284.html"}}]}],"card":[],"search":[],"infoCard":[],"title":{"mainTitle":"","subtitle":"","linkUrl":"","btnText":""},"visual":{"topbg":"https://img.alicdn.com/tfs/TB1EJ1xJkL0gK0jSZFxXXXWHVXa-1740-328.jpg","icon":"dbl-icon-product-mqc","textColor":"light"},"dataList":[],"sceneCard":[],"txt":[{"title":"适用场景","scenariosone":[]}]}}

    移动测试

    为企业客户和移动开发者提供真机测试服务的云平台,拥有大量热门机型,提供7x24全天候服务,帮助客户发现App中的各类隐患(应用崩溃、各类兼容性问题、功能性问题、性能问题等),减少用户流失,提高App质量和市场竞争力。

    {"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":3,"count":3}]},"card":[{"des":"IP地理位置库(GeoIP Databases)是对运营商分配的IP地址进行地理定位的服务,鉴别出IP地址被分配使用的大致地理位置范围(精确到市区级)。","link1":"https://www.aliyun.com/product/dns/geoip","link":"https://www.aliyun.com/product/dns/geoip","icon":"https://img.alicdn.com/tfs/TB12mAkJUz1gK0jSZLeXXb9kVXa-200-200.png","btn2":"前往控制台","tip":"","btn1":"查看详情","link2":"https://dns.console.aliyun.com/#/ipPositions/list","title":"IP地理位置库"}],"search":[{"txt":"DNS全系列产品集","link":"https://www.aliyun.com/product/dns"},{"txt":"云解析DNS(公网域名解析)","link":"https://wanwang.aliyun.com/domain/dns"},{"txt":"PrivateZone","link":"https://www.aliyun.com/product/pvtz"}],"countinfo":{"search":{"length_pc":0,"length":0},"card":{"length_pc":0,"length":0}},"simplifiedDisplay":"newEdition","newCard":[{"ifIcon":"img","icon":"gtm","link":"https://www.aliyun.com/product/dns/geoip","contentLink":"https://www.aliyun.com/product/dns/geoip","infoGroup":[{"infoName":"产品入门","infoContent":{"firstContentName":"产品定价","lastContentName":"开发指南","firstContentLink":"https://help.aliyun.com/document_detail/154117.html","lastContentLink":"https://help.aliyun.com/document_detail/154143.html"}},{"infoName":"关联产品","infoContent":{"firstContentName":"云解析DNS","firstContentLink":"https://wanwang.aliyun.com/domain/dns","lastContentName":"PrivateZone","lastContentLink":"https://www.aliyun.com/product/pvtz"}}],"btn1":"查看详情","link1":"https://www.aliyun.com/product/dns/geoip","title":"IP地理位置库","iconImg":"https://img.alicdn.com/tfs/TB12mAkJUz1gK0jSZLeXXb9kVXa-200-200.png","btn2":"前往控制台","btn3":"帮助手册","des":"IP地理位置库(GeoIP Databases)是对运营商分配的IP地址进行地理定位的服务,鉴别出IP地址被分配使用的大致地理位置范围(精确到市区级)。","link2":"https://dns.console.aliyun.com/#/ipPositions/list","link3":"https://help.aliyun.com/product/151537.html"}],"visual":{"icon":""}}

    {"$env":{"JSON":{}},"$page":{"env":"production"},"$context":{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":3,"count":3}]},"card":[{"des":"IP地理位置库(GeoIP Databases)是对运营商分配的IP地址进行地理定位的服务,鉴别出IP地址被分配使用的大致地理位置范围(精确到市区级)。","link1":"https://www.aliyun.com/product/dns/geoip","link":"https://www.aliyun.com/product/dns/geoip","icon":"https://img.alicdn.com/tfs/TB12mAkJUz1gK0jSZLeXXb9kVXa-200-200.png","btn2":"前往控制台","tip":"","btn1":"查看详情","link2":"https://dns.console.aliyun.com/#/ipPositions/list","title":"IP地理位置库"}],"search":[{"txt":"DNS全系列产品集","link":"https://www.aliyun.com/product/dns"},{"txt":"云解析DNS(公网域名解析)","link":"https://wanwang.aliyun.com/domain/dns"},{"txt":"PrivateZone","link":"https://www.aliyun.com/product/pvtz"}],"countinfo":{"search":{"length_pc":0,"length":0},"card":{"length_pc":0,"length":0}},"simplifiedDisplay":"newEdition","newCard":[{"ifIcon":"img","icon":"gtm","link":"https://www.aliyun.com/product/dns/geoip","contentLink":"https://www.aliyun.com/product/dns/geoip","infoGroup":[{"infoName":"产品入门","infoContent":{"firstContentName":"产品定价","lastContentName":"开发指南","firstContentLink":"https://help.aliyun.com/document_detail/154117.html","lastContentLink":"https://help.aliyun.com/document_detail/154143.html"}},{"infoName":"关联产品","infoContent":{"firstContentName":"云解析DNS","firstContentLink":"https://wanwang.aliyun.com/domain/dns","lastContentName":"PrivateZone","lastContentLink":"https://www.aliyun.com/product/pvtz"}}],"btn1":"查看详情","link1":"https://www.aliyun.com/product/dns/geoip","title":"IP地理位置库","iconImg":"https://img.alicdn.com/tfs/TB12mAkJUz1gK0jSZLeXXb9kVXa-200-200.png","btn2":"前往控制台","btn3":"帮助手册","des":"IP地理位置库(GeoIP Databases)是对运营商分配的IP地址进行地理定位的服务,鉴别出IP地址被分配使用的大致地理位置范围(精确到市区级)。","link2":"https://dns.console.aliyun.com/#/ipPositions/list","link3":"https://help.aliyun.com/product/151537.html"}],"visual":{"icon":""}}}

    展开全文
  • react传参相关记录

    2021-08-11 16:46:25
    一、原理相关: 1、关于render渲染两次的原理 ...7、react中 this.setState({index:1}) 和 this.state.index=1 的区别 8、headers添加token 报错 9、父子组件传参问题 父组件给子组件传参: 子组件给父组件

    一级目录

    二级目录

    三级目录

    一、原理相关:

    1、关于render渲染两次的原理

    https://www.cnblogs.com/chaoyuehedy/p/9638848.html

    二、问题:

    1. fetch请求

    let getFileTypesUrl = `${context.contextPath}/projectfile/getAllFileTypes?p_no=` + this.state.projectNo;
    //调用方法
    this.getFileTypes(getFileTypesUrl)
    
    
    
    getFileTypes(url) {
            fetch(url,
                {
                    method: "GET"
                })
        		//后台请求的响应结果 data:请求到的数据,类似于ajax
                .then((response) => response.json())
                .then((data) => {
                    let list = [];
                    if (data !== null && data !== undefined) {
                        data.forEach((item, index, arr) => {
                            let obj = {value: item, text: item};
                            list.push(obj);
                        });
                        this.state.fileTypes = list;
                    }
                })
        }
    

    同步:
    homePage.js
    法一:回调

    import {ewdUrl,fnNewToken, fnNewToken2} from "./util/util";
    getNewToken2() {
       let that = this
        fnNewToken2((newToken)=>{
          console.log("myfunc",newToken)
          that.setState({
          token: Boolean(newToken) ? newToken : localStorage.getItem("jwtToken")
        })
      });
      // console.log('newToken===', newToken)
    }
    

    法二:

    async getNewToken() {
      let newToken = await fnNewToken();
      console.log('newToken===', newToken)
      this.setState({
        token: Boolean(newToken) ? newToken : localStorage.getItem("jwtToken")
      })
    }
    

    util.js
    法一:回调

    export let fnNewToken2 = function (myfunc) {
        let newToken = '';
        let tokenURL = casUrl + "/cas/jwt/token";
        fetch(tokenURL, {
            method: 'GET',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;'
            }
        }).then(resp => resp.json()).then(resp => {
            if (resp) {
                if (resp.status === true) {
                    newToken = resp.jwtToken;
                    if(myfunc){
                        console.log("util token", newToken)
                        localStorage.removeItem("jwtToken");
                        localStorage.setItem("jwtToken", newToken)
                        myfunc(newToken)
                    }
                } else {
                    console.log('token校验失败')
                }
            }
        })
    };
    

    法二:

    export let fnNewToken = async function () {
        let tokenURL = casUrl + "/cas/jwt/token";
        let response = await fetch(tokenURL, {
            method: 'GET',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;'
            }
        })
        let data = await response.json();
        console.log("=====data====",data)
        if(Boolean(data.status) && data.status === true){
            localStorage.removeItem("jwtToken");
            localStorage.setItem("jwtToken",data.jwtToken)
            localStorage.setItem("refreshToken",data.jwtToken)
            return data.jwtToken;
        } else{
            console.log("token校验失败!")
            return null;
        }
    };
    

    2、方法

    onClick: (item, events) => {    
        let previewUrl = `${context.contextPath}/projectfile/getFileInfo?fileId=` +rowData.file_id;    
        this.showModal.call(this,previewUrl);
    }
    

    showModal 用call()方法,不用在constructor声明 this.showModal = this.showModal.bind() 直接写该方法内容即可。
    该处 使用this.showModal.bind(this)这样的形式不能进入到该方法。

    3、返回

    1. 返回上一个url
      document.referrer: referrer属性返回载入当前文档的来源文档的URL
      window.location.replace(document.referrer);
      window.location.reload(document.referrer);
      Location 对象方法:
      assign() 载入一个新的文档
      reload() 重新载入当前文档
      replace() 用新的文档替换当前文档

    2. 新打开浏览器页签:
      window.open(url, ‘_blank’).location;

    3. 跳转,去请求后台
      window.location = ${context.contextPath}/projectpage/index?p_no=+p_no;

    4. js存储对象
      JavaScript 存储对象
      Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

    localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。

    sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

    存储对象方法
    方法							描述
    key(n)						返回存储对象中第 n 个键的名称
    getItem(keyname)			返回指定键的值
    setItem(keyname, value)		添加键和值,如果对应的值存在,则更新该键对应的值。
    removeItem(keyname)			移除键
    clear()						清除存储对象中所有的键
    
    window.localStorage		在浏览器中存储 key/value 对。 没有过期时间。
    window.sessionStorage	在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
    

    4、sessionStorage和localStorage和cookie

    sessionStorage

    componentDidMount(){
    	 this.setIndex();
    }
     setIndex(){
            //判断是否存在
            // if(!window.sessionStorage) {
                if (sessionStorage.getItem("index") != null) {
                    let indexData = sessionStorage.getItem("index");
    
    				//componentDidMount不能用setState ,setState 是异步的 ,想立马看到state修改后的值,这就用到了setState的回调
                    this.setState({index: indexData}, () => {
                        console.log('index', this.state.index);
                    });
                }
                else {
                    this.setState({index: 0});
                }
            // }
        }
    

    存:sessionStorage.setItem(“index”,index );
    localStorage.setItem(“jwtToken”,jwtToken)
    取:sessionStorage.getItem(“index”)
    localStorage.getItem(“jwtToken”) 移除:
    localStorage.removeItem(“jwtToken”)

    使用cookie存储用户信息:
    session/cookie 是用于存储用户相关信息的数据存储形式
    session存储在服务器保存的是对象,而cookie存储在浏览器本地保存的是字符串
    由于session是存储在服务器,会占用服务器资源,一般来说小型项目使用cookie的较多

    1.下载cookie相关的包
    npm install react-cookies --save
    
    2.cookie知识储备
    引用
    import cookie from 'react-cookies'
    
    3、存; 设置cookie,第三个参数的意思是所有页面都能用这个cookie
    cookie.save(key,value,{path:"/"})
    4、取
    cookie.load('userId')
    5、删
    cookie.remove('userId')
    6、设置失效
    let inFifteenMinutes = new Date(new Date().getTime() + 24 * 3600 * 1000);//一天
    cookie.save('userId', "123",{ expires: inFifteenMinutes });
    

    根据以上存取cookie的格式,可以写出cookie.js

    import cookie from 'react-cookies'
    
    
    获取当前用户cookie
    export const loginUser = () => {
      return cookie.load('userInfo')
    }
    
    
     用户登录,保存cookie
    export const onLogin = (user) => {
      cookie.save('userInfo', user, { path: '/' })
    }
    
    
    用户登出,删除cookie
    export const logout = () => {
      cookie.remove('userInfo')
      window.location.href = '/Login'
    }
    

    3、react页面调用

    以学生管理系统为例,未登录(无cookie时)pathname为’/‘时,跳转到Login进行登录,登录后跳转到对应权限页面。已登录(有cookie存储时)pathname为’/'时,跳转到当前用户对应的权限主页面

    import React, { Component } from 'react'
    import { Router, Route, Switch } from 'react-router-dom'
    import { createBrowserHistory } from 'history'
    import { loginUser } from './cooike' // 引入
    import {
      StudentLayout, TeacherLayout, AdminLayout, Login,
    } from './pages' // 导入页面
    import NotFound from './components/Common/NotFound'
    import Loading from './components/Common/Loading'
    
    const browserHistory = createBrowserHistory() // 路由分发
    
    class BasicRoute extends Component {
      render () {
        const userInfo = loginUser()
        if (userInfo && window.location.pathname === '/') {
          if (userInfo.accountRole === 0) {
            window.location.href = '/Admin'
          } else if (userInfo.accountRole === 1) {
            window.location.href = '/Teacher'
          } else if (userInfo.accountRole === 2) {
            window.location.href = '/Student'
          }
        }
        return (
          <Router history={browserHistory}>
            <Switch>
              {
                !loginUser()
                  ? <Route exact path="/Login" component={Login} />
                  : (
                    <>
                    <Route path="/Student" component={StudentLayout} />
                    <Route path="/Teacher" component={TeacherLayout} />
                    <Route path="/Admin" component={AdminLayout} />
                    </>
                  )
              }
              <Route exact path="/" component={Loading} />
              <Route exact component={NotFound} />
            </Switch>
          </Router>
        )
      }
    }
    
    export default BasicRoute
    

    react-cookie官网实例: https://www.npmjs.com/package/react-cookies

    补充:

    用户登出,删除cookie

    export const logout = () => {
      cookie.remove('userInfo')
      window.location.href = '/Login'
    }
    

    如果未在cookie.remove()方法中指定path,那么并不会完全登出当前账号,比如在/Admin/Personal/Add路径下点击退出按钮,并不会如预期登出,解决这个问题的办法就是,在cookie.remove()方法中设定path

    用户登出,删除cookie

    export const logout = () => {
      cookie.remove('userInfo', { path: '/' })
      window.location.href = '/Login'
    }
    

    就可以解决cookie并未清除的问题了

    5、componentWillMount和componentDidMount的区别

    关于react生命周期 https://www.runoob.com/react/react-component-life-cycle.html

    组件的生命周期可分成三个状态:

    • Mounting:已插入真实 DOM
    • Updating:正在被重新渲染
    • Unmounting:已移出真实 DOM

    生命周期的方法有:

    componentWillMount 在渲染前调用,在客户端也在服务端。 componentDidMount :
    在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。
    如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout,
    setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。 componentWillReceiveProps
    在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。 shouldComponentUpdate
    返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
    componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
    componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。 componentWillUnmount在组件从
    DOM 中移除之前立刻被调用。

    6、react setState理解

    https://segmentfault.com/a/1190000015463599?utm_source=tag-newest

    7、react中 this.setState({index:1}) 和 this.state.index=1 的区别

    1)this.state通常是用来初始化state的,this.setstate是用来修改state值的。如果你初始化了state之后再使用this.state,之前的state会被覆盖掉,如果使用this.setState,只会替换掉相应的state值。
    2)this.setState({})会触发render方法,重新渲染界面。而this.state.xxx=’’ 不会重新加载UI。

    3)this.setState({})是异步的。

    https://blog.csdn.net/weixin_43199050/article/details/93098980

    8、headers添加token 报错

    解决方法:(原因不太清楚)

    // props改变时 更新state
    componentWillUpdate(nextProps, nextState, nextContext) {
      // 先比较值是否一样
      if (this.state.pass !== nextProps.pass) {
        this.setState({
          pass: nextProps.pass
        })
      }
    }
    

    9、父子组件传参问题

    父组件给子组件传参:

    // 父组件中 SpotInspector为子组件名

      <SpotInspector
              status={statusMap[indexArr[0]]}
              ref="spotInspector"
              id={this.state.id}
              processInstanceId={this.state.processInstanceId}
              loginId={this.state.loginId}
              endTime={this.state.endTime}
              handleInfo={this.state.handleInfo}
              djFaultType={this.state.djFaultType}
             djReasonInfo={this.state.djReasonInfo}
             djHandleInfo={this.state.djHandleInfo}
             djHandleResult={this.state.djHandleResult}
             djOtherInfo={this.state.djOtherInfo}
             djMagorType={this.state.djMagorType}
    />
    

    status 即 参数名
    // 子组件使用props接收父组件传过来的参数

    constructor(props) {
        super(props);
        this.state = {
          status: this.props.status,
          }}
          
    

    在父页面第一次渲染时,即把status传给子组件了,
    此时子组件拿到的是父组件里设置的this.state.status的默认值(比如 默认值为’’)
    在父组件通过接口拿到数据后 再次渲染页面,会把新值传给子组件
    此时子组件中的this.props.status值即随之改变。
    但是在constructor中的state不会更新

    在子页面中回显该值时 需要使用 this.props.status
    父组件中该值改变时,给子组件传的参数 props.status也会随之改变,但是子组件中的state不会改变。
    所以子页面中回显时需要使用this.props.status

    这样会有一个别的问题,比如提交数据时 使用的 this.state.status,但是在父组件的值改变时,state不会随之更新(此时state的值是初始化的值)

    只有在该input框更改时 触发onChange方法时会更新state,如果当前没有修改input框内容时,state不会更新,因此 可以通过将 下一次props中的值(这个为第二次渲染时拿到的新值)和state进行比较

    // props改变时 更新state
    componentWillUpdate(nextProps, nextState, nextContext) {
      // 先比较值是否一样
      if (this.state.pass !== nextProps.pass) {
        this.setState({
          pass: nextProps.pass
        })
      }
    }
    

    子组件给父组件传值
    https://www.jianshu.com/p/ccc15c5963c4

    10、下拉菜单 某个item颜色不同

    onToggle={(t) => {
        console.log('t',t)
        if(dropdownStyle === "class2"){
            document.querySelectorAll('.class2 .epm-menu_item-title').forEach(el =>{ if (el.innerText.indexOf('item2') > -1 ){el.style.color = 'red'}})
        } else{
            document.querySelectorAll('.class1 .epm-menu_item-title').forEach(el =>{ if (el.innerText.indexOf('item2') > -1 || el.innerText.indexOf('item1') > -1){el.style.color = 'red'}})
        }
    }}
    

    11、function() 和 ()=>的区别

    1)定义

    //使用function定义的函数
    function foo(){
    	console.log(this);
    }
    
    // 箭头函数
    var obj = { aa: foo };
    foo(); //Window
    obj.aa() //obj { aa: foo }
    

    2)this指向
    使用function定义的函数中this指向是随着调用环境的变化而变化的。
    使用箭头函数的时候,this的指向是没有发生变化的。

    3)构造函数
    function是可以定义构造函数的,而箭头函数是不行的。

    4)变量提升
    由于js的内存机制,function的级别最高,而用箭头函数定义函数的时候,需要var(let const定义的时候更不必说)关键词,而var所定义的变量不能得到变量提升,故箭头函数一定要定义于调用之前!

    foo(); //123
    function foo(){
    	console.log('123');
    }
    
    arrowFn(); //Uncaught TypeError: arrowFn is not a function
    var arrowFn = () => {
    	console.log('456');
    };
    

    12、React路由传参的三种方式

    方式 一:
    通过params
    1.路由表中

      <Route path=' /sort/:id '   component={Sort}></Route>
    

    2.Link处
    1)HTML方式

    <Link to={ ' /sort/ ' + ' 2 ' }  activeClassName='active'>XXXX</Link > 
    

    2)JS方式

    this.props.history.push(  '/sort/'+'2'  )
    

    3.sort页面

       通过  this.props.match.params.id        就可以接受到传递过来的参数(id)
    

    方式 二:
    通过query
    1、前提:必须由其他页面跳过来,参数才会被传递过来
    注:不需要配置路由表。路由表中的内容照常:
    2、Link处
    1)HTML方式

    2)JS方式

    this.props.history.push({ path : ‘/sort’ ,query : { name: ’ sunny’} })

    3、sort页面
    this.props.location.query.name

    方式 三:
    通过state
    1、同query差不多,只是属性不一样,而且state传的参数是加密的,query传的参数是公开的,在地址栏
    2、Link 处
    1)HTML方式:

     <Link to={{ path : ' /sort ' , state : { name : 'sunny' }}}> 
    
                      
    

    2)JS方式:

    this.props.history.push({ pathname:'/sort',state:{name : 'sunny' } })
    
                      
    

    3、sort页面

    this.props.location.state.name
    

    13、React下载表格数据导出生成excel文件

    1、安装依赖

    npm install js-export-excel
    

    2、引入依赖

    import ExportJsonExcel from 'js-export-excel';
    

    3、使用

    downloadTest(){
        const option = {};
        // 文件名字
        option.fileName = '输煤系统报表';
        // 文件的数据集
        option.datas = [
            {
                // 通常用来放我们的表格数据
                sheetData: this.state.tableItems,
                // sheet名字
                sheetName: 'sheet',
                // 第一行
                sheetHeader: ['设备名称','纵向撕裂1','纵向撕裂2','跑偏跳闸','速度跳闸','跑偏报警','速度报警'],
                //列宽 需与列顺序对应, 需要则写
                // columnWidths: []
    
    
     }
        ]
        const toExcel = new ExportJsonExcel(option);
        let file = toExcel.saveExcel()
    }
    
           
    

    14、使用 moment 来获取日期

    1. 安装moment依赖
      npm install moment --save

    2. 引入moment依赖
      import moment from ‘moment’

    3. 使用

    //获取 当前时间
    moment().format('YYYY-MM-DD HH:mm:ss');   //2020-08-25 10:23:59
    
    //获取年份
    moment().year();       //2020
    moment().get('year');  //2020
    
    //获取月份(0:一月份  11: 12月份 )
    moment().month();       //7
    moment().get('month');  //7
    
    //获取一个月的某一天
    moment().date();       //25
    moment().get('date');  //25
    
    //获取小时
    moment().hours();          //11
    moment().get('hours');     //11
    
    //获取分钟
    moment().minutes();        //11
    moment().get('minutes');   //11
    
    //获取秒数
    moment().seconds();        //17
    moment().get('seconds');   //17
    
    //获取 今天星期几
    moment().format('dddd');     //Tuesday
    moment().format('d');        //2
    
    moment().day();              //2(0~6 分别代表周日到周六)
    moment().weekday();          //2(0~6 分别代表周日到周六)
    moment().isoWeekday();       //2(1~7 分别代表周一到周日)
    moment().get('date');        //2
    moment().get('weekday');     //2
    moment().get('isoWeekday');  //2
    
    
    
    设置时间
    
    //设置年份
    moment().year(2019);
    moment().set('year', 2019);
    moment().set({year: 2019});
    
    //设置月份
    //0~11, 0: 1月份, 11: 12月份
    moment().month(8);        
    moment().set('month', 8);
    
    
    
    格式化时间
    //格式化指定时间
    moment(time).format('YYYY-MM-DD');
    
    
    时间差
    now_time.diff(start_time,"hour");      //小时数
    now_time.diff(start_time,"minute");    //分钟数
    now_time.diff(start_time,"second");    //现在和初始时间相差的秒数
    now_time.diff(start_time, 'months');   //月数
    now_time.diff(start_time, 'weeks');    //周数
    now_time.diff(start_time, 'days');     //天数
    
    
    相对时间
    //add       加时间    
    //subtract  减时间
    moment().subtract(10, 'days').format('YYYY-MM-DD HH:mm:ss');  //2020-08-15 10:51:48
    moment().subtract(6, 'days').format('YYYY-MM-DD HH:mm:ss');  //2020-08-19 10:51:48
    moment().subtract(3, 'days').format('YYYY-MM-DD HH:mm:ss');  //2020-08-22 10:51:48
    moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');  //前一天:2020-08-24 10:51:48
    moment().format('YYYY-MM-DD HH:mm:ss');                      //当前时间:2020-08-25 10:51:48
    moment().add(1, 'days').format('YYYY-MM-DD HH:mm:ss');       //后一天:2020-08-26 10:51:48
    moment().add(3, 'days').format('YYYY-MM-DD HH:mm:ss');       //2020-08-28 10:51:48
    moment().add(10, 'days').format('YYYY-MM-DD HH:mm:ss');      //2020-09-04 10:51:48
    
    moment().subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss');  //前一年:
    moment().add(1, 'year').format('YYYY-MM-DD HH:mm:ss');       //后一年:
    
    moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm:ss');  //前一小时:
    moment().add(1, 'hours').format('YYYY-MM-DD HH:mm:ss');       //后一小时:
    
    
    // startOf 设置为起始时间 
    moment("20111031", "YYYYMMDD").fromNow();    //9 years ago
    moment().startOf('day').fromNow();           //11 hours ago
    moment().startOf('hour').fromNow();          //an hour ago
    moment().endOf('day').fromNow();             //in 13 hours
    moment().endOf('hour').fromNow();            //in 15 minutes
    
    //年初
    moment().startOf('year').format('YYYY-MM-DD HH:mm:ss');   //2020-01-01 00:00:00
    //月初
    moment().startOf('month').format('YYYY-MM-DD HH:mm:ss');  //2020-08-01 00:00:00
    //日初
    moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');    //2020-08-25 00:00:00
    //周初  本周第一天(周日)
    moment().startOf('week').format('YYYY-MM-DD HH:mm:ss');   //2020-08-23 00:00:00
    //本周周一初
    moment().startOf('isoWeek').format('YYYY-MM-DD HH:mm:ss');  //2020-08-24 00:00:00
    
    
    
    
    
     moment().startOf('day').format('YYYY-MM-DD HH:mm:ss') // 当天0点的时间格式
     moment().startOf('day').format('X') // 当天0点的时间缀,以10位Unix时间戳输出(秒)
     moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') // 当天23点59分59秒的时间格式
     moment().endOf('day').format('x') //当天23点59分59秒以13位Unix时间戳输出(毫秒)
    
     moment('2020-06-30').startOf('day').format('x') // 2020-06-30当天0点的以13位Unix时间戳输出(毫秒)
     moment('2020-06-30').endOf('day').format('x') //  2020-06-30当天24点的以13位Unix时间戳输出(毫秒)
    
    展开全文
  • React 轮询并弹出浏览器通知(Notification) Notification是H5新增属性,目前应该是除IE外其他浏览器都兼容 点我可以看Notification的完整api 需求是进入页面后开始轮询,然后符合条件的话弹出浏览器通知框 一、...
  • React Navigation 5.x详解

    2020-12-01 10:57:36
    在多页面应用程序中,页面的跳转是通过路由或导航器来实现的。在RN应用开发过程中,早期的路由可以直接使用官方提供的Navigator组件,不过从0.44版本开始,Navigator被官方从react native的核心组件库中剥离出来,放...
  • react hooks(v16.8加的特性)增加hook的原因useStateuseEffectHook规则自定义hookuseRef[其他Hook API索引](https://react.docschina.org/docs/hooks-reference.html)3. 异步组件示例(异步组件+展位)实现一个异步...
  • react结合iframe小实践

    2020-07-31 09:28:52
    通过window.open打开一个新页面,在新的页面里嵌入iframe。 路由: <Router history={history}> <Switch> <Route path="/Demo" component={Demo} /> <Route path="/iframeDemo/:id" ...
  • 小白学react之调用微信jssdk实战

    千次阅读 2017-04-23 11:30:12
    本打算网上找个react调用微信的jssdk的实例进行学习的,但可惜搜索了半天而未果,只有一些基于其他框架的。估计是大牛们都觉得太简单或者太忙了,懒得提笔花几个小时来给我们做个Demo。对于处于快速学习年代的我们,...
  • 解决React中刷新页面redux数据丢失

    千次阅读 2019-10-16 16:49:11
    为什么要存储react-redux中的数据? 当页面刷新之后,redux中的数据会回到初始值,之前存储到redux中的数据也就不复存在了。废话不多说,直接上代码: 在reducer文件中: let shopDetailInfo = sessionStorage....
  • tion () { WeixinJSBridge.call('closeWindow'); /** window.opener=null;... window.open('','_self'); window.close(); */ return false; }); window.history.pus
  • 今天给小伙伴们分享一个全新开发的React自定义对话框最近RLayer。看名称就能联想到前端界有名的弹窗layer.js,其实在设计开发之初就有借鉴layer插件实现思想。功能提供函数式调用方法 rlayer({…})12弹框类型 (toast...
  • 可以直接使用window.location.href进行页面跳转 window.location.href = "./punch/clock_frm.html" 问号传参: window.location.href = "./punch/clock_frm.html?modFlag="+modFlag+'&...
  • 尚硅谷天禹老师的react全家桶课程
  • 问题:使用ajax跳转到新页面无效(浏览器Safari) 问题:使用ajax跳转到新页面无效(浏览器Safari) window.open("{% url "runtestinfo" %}") 但是使用loca ... PHP弹出提示框并跳转到新页面即重定向到新页面 本文...
  • react

    2021-03-17 19:10:50
    React 一、React的简介 1、介绍 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。 React 起源于 Facebook 的内部项目,用来架设 Instagram 的...
  • React 单元测试实践

    2021-11-09 11:49:28
    React单元测试实践 单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。单元测试是由程序员自己来完成,最终受益的也是程序员自己。执行单元测试,就是为了尽量证明这段代码的行为和期望的一致...
  • React 学习 React 路由 现代的前端应用大多都是 SPA(单页应用程序),也就是只有一个 HTML 页面的应用程序。因为它的用户体 验更好、对服务器的压力更小,所以更受欢迎。为了有效的使用单个页面来管理原来多页面的...
  • @TOC 欢迎使用Markdown编辑器 ...我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点功能,帮助你用它写博客: 全新的界面设计 ,将会带来全...
  • 转自:https://juejin.im/post/5c0915795188250b064f4fa0Android物理返回键的点击事件,一般webview的默认行为是 window.history.go(-1) ,但是在实际需求场景下,简单的页面回退并不能满足需求,所以需要H5页面监听...
  • 前端—react项目

    2021-06-24 21:10:34
    塔希望自己去实现,例如通过生命周期函数通过浏览器的url(location属性) React中使用 react-router-dom路由 react-router和react-router-dom两个包都可以实现单页面应用的页面间的跳转 // react-router-dom的使用...
  • React react的起源和与发展 react起源于Facebook的内部项目 react与传统MVC的关系 react不是一个MVC框架,可以...react并不认可MVC这种开发模式,react构建用户界面可以简单地理解为他就是一个组件化的框架来完成页面
  • reactreact学习中,需要安装两个包react@16.1.1 react-dom@16.1.1 react这个包是专门用来创建react组件、组件生命周期等等 react-dom里面主要封装了和DOM操作相关的包 cnpm i react@15.6.2 react-dom@15.6.2 -S ...
  • 组件化 React应用采用基于组件的架构方式,也就是说可以将一个复杂的页面分解成一个个较简单的组件来实现。但组件在开发时,常常会遇到一些问题,比如为单一组件赋予了过多的指责。这在项目上是可行的,但如果需要...
  • React详解

    2020-12-22 17:59:51
    React的安装和配置 https://zh-hans.reactjs.org/docs/getting-started.html JSX 简介 const element = <h1>Hello, world!</h1>; 它被称为 JSX,是一个 JavaScript 的语法扩展。我们建议在 React 中...
  • react 保持状态Persist React’s useState to localStorage is a common requirement. You’d want to persist user’s preferences or data to have them at hand on next sessions. However, there are some bugs ...
  • } } // 定义了一个自定义标签 组件 window.customElements.define('hp-button', HpButton) Shadow DOM(影子DOM) let shadow = this.attachShadow({ mode: 'open' }); let btnTmpl = document....
  • react使用模态框In the context of web applications, a modal is a nifty tool that can present information without forcing the user to navigate from the current webpage. In this article, we venture to 在...
  • 多列布局 // rnc react native component import React, {Component} from 'react'; // 组件或者API使用时,需要提前...const {height, width} = Dimensions.get('window'); // rpx换算为物理像素 使用方法 例如:30r
  • 创建react应用程序Create a Spotify App with OAuth Authentication使用OAuth身份验证创建Spotify应用 介绍(Introduction) In this article, you will create a Fully Responsive Spotify Music Search App using ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,403
精华内容 561
关键字:

react window.open打开的新页面的title

友情链接: light_water.zip