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获取数据做处理。

相关推荐
Hilaku11 分钟前
为什么死磕 1px 的团队,用户体验反而更差?
前端·javascript·程序员
陈拉斯40 分钟前
给公司年会写了个大屏抽奖系统:动画在前端跑,凭什么说结果没被改?
javascript
志尊宝42 分钟前
Vue3 零基础每日笔记(055):组件里正确使用 store——storeToRefs 解构与 $patch 批量修改
笔记·vue·html·前端开发·软件开发
yzy851 小时前
Vue中下载或打开文件的JavaScript方法
前端·javascript·vue
用户298698530141 小时前
在 React 中用 JavaScript 将 Word 转换为文本
前端·javascript·react.js
吴声子夜歌3 小时前
HTML——看似普通的元素的背后(<a>标签)
html
李少兄3 小时前
深入解析 JavaScript 中的 `document` 对象
javascript
IMPYLH3 小时前
HTML 的 <style> 元素
前端·html
paopaokaka_luck3 小时前
考研政治刷题小程序(AI推荐题目、ECharts数据分析、章节练习与专项训练、模拟考试、错题本与收藏夹、学习打卡与目标管理、题库和组卷维护)
前端·javascript·spring boot·spring·数据分析·echarts
刃神太酷啦3 小时前
前端入门第一课:HTML 基础语法 + 常用标签 + 实战全解
服务器·c语言·前端·javascript·css·c++·html