react组件向html传值

遇到三方地图只能使用html来构造交互页面,而且地图部署在跳板机,这时需要将react组件内值传递给html页面进行处理,也适用于react组件向html传值,上代码

javascript 复制代码
let arr ={name:'aa',value:'11'}
for (let key in arr) {
    paramUrl += "&" + key + "=" + item[key];
}
//拼接到需要传值的html地址
`aa.html?` + paramUrl

需要接值的html

javascript 复制代码
function QueryString(val) {
    var uri = location.search;
    var re = new RegExp("" + val + "\=([^\&\?]*)", "ig");
    return ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 1)) : null);
}
let name = decodeURI(QueryString('name'));
let address = decodeURI(QueryString('value'));
//变量内即是组件传递过来的值

如果数据过多,不建议使用这个方法,可以在html直接api获取数据做处理。

相关推荐
英俊潇洒美少年14 小时前
Vue3 深入响应式系统
前端·javascript·vue.js
颜酱14 小时前
回溯算法实战练习(3)
javascript·后端·算法
英俊潇洒美少年15 小时前
React 最核心 3 大底层原理:Fiber + Diff + 事件系统
前端·react.js·前端框架
我命由我1234515 小时前
React Router 6 - 概述、基础路由、重定向、NavLink、路由表
前端·javascript·react.js·前端框架·ecmascript·html5·js
yaaakaaang15 小时前
(四)前端,如此简单!---Promise
前端·javascript
aini_lovee16 小时前
C# 实现邮件发送源码(支持附件)
开发语言·javascript·c#
GISer_Jing16 小时前
ReAct规划原理实战指南
前端·react.js·ai·aigc
英俊潇洒美少年16 小时前
js 进程与线程的讲解
javascript
汉堡大王952718 小时前
# AI 终于能"干活"了——Function Calling 完全指南
javascript·人工智能·机器学习
吴声子夜歌18 小时前
JavaScript——call()、apply()和bind()
开发语言·前端·javascript