react项目在页面插入script标签，引入file.min.js

已于 2022-04-20 14:00:22 修改
阅读量2.2k 收藏 1
点赞数
分类专栏： html 文章标签： react javascript html
于 2022-04-20 13:56:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012149637/article/details/124295758
版权

现在有一个需求，需要在登录后往页面的head插入script标签，src路径是网关那边给的一个*.min.js文件，同时还指定了一些属性，比如

<script type="text/javascript" src="spa.min.js?uid=b8f1a743-d7f5-4687-a8a4-b34b05203eba&amp;cid=5f3e36149fa95c0414408ad4" id="_clouddeep" data-token="9a6e1cc9-2a1e-4da9-be5b-5d6be7d3fea6" data-marktext="示例文字" data-markcolor="#dcdcdc" data-marksize="24"></script>

不仅有id、src属性，还有一些自定义的比如：data-token、data-marktext等属性，经过一番百度最终以下代码可以正常运行

先创建一个element，通过setAttribute，设置好它的值，然后append就可以了，亲测可以执行

小刘小刘可爱一流zz
关注
专栏目录
React中引入外部js的方法
白起的博客
03-02 1万+
使用插件react-load-script，如果没有安装可以使用yarn add react-load-script 或者 npm install react-load-script，看你使用哪个包管理工具。 然后你就可以像使用React组件那样插入JS，如下代码。 import React from 'react'; import Script from 'react-load-script';...
react教程 (通过script引入)
weixin_30596735的博客
11-22 3216
1、React 入门实例教程 ：http://www.ruanyifeng.com/blog/2015/03/react.html（阮一峰的博客） 或 https://segmentfault.com/a/1190000012921279（作为阅读参考） <!DOCTYPE html> <html> <head> &l...
react-loadscript:脚本标签作为React组件
05-16
React负荷脚本 npm install react react-loadscript --save 脚本加载作为组件 （我很抱歉） import { Script } from 'react-loadscript' ; class App { render ( ) { return < Script src = 'https://code.jquery.com/jquery-2.1.4.min.js' > { ( { done } ) => ! done ? < div> loading... < / div > : < div> { $ . map ( [ 1 , 2 , 3 ] , i => < div> { i * 5 } < / div > ) } < / div > } < / Script >
React页面插入script
weixin_30764883的博客
12-24 803
项目中遇到插入广告的需要，而广告的信息只是一个url链接，这个链接返回的时一个js，和以前插入广告有点不同。所有找了很多方式。 先来展示广告链接返回的信息： 假设广告链接为：http://192.168.1.1:8081/advert/getAdvert?flowerId=1987&advertType=2 链接返回的信息，目的是在指定位置插入广告元素div节点： (funct...
在React中引入多个script标签，并同步执行
火星基地
07-07 6793
1. 前言 最近在用React写一个小项目时，遇到了这样的需求： 在某个组件中引入外部js文件，也就是引用一个或多个script标签。这些script标签仅供某个组件使用，所以不想在html页面中直接引进来，想就在相应的React的函数组件中引入，查阅了相关资料，找到了以下可行办法。 2. 动态创建script标签并执行 在组件挂载时，动态创建script标签，并设置标签的src属性，若不是外部文件，还可以设置innerHTML，然后追加到body标签的最下面。 在组件即将卸载时，移除这个标签。 ❗❗❗注意
script标签如何实现异步加载_React中异步引入script标签
weixin_39522408的博客
11-26 510
React中支持异步加载script，通过react-loadable可以在React中异步import。但是目前遇到一个问题，引入全局的script标签(不支持CommonJS方式导入)。但是如果把所有标签全部写在index.html中的话，那么第一页加载的速度会变慢，所以希望实现异步引入script标签的方法。目前通过document.createElement的方法来动态创建脚本标签，然后通...
react中插入script标签
sinat_38728634的博客
05-29 3143
生成结果：
React 从零开始学习（二）—— JSX
且听风吟的博客
07-12 1454
React 从零开始学习（二）—— 新建页面
React 16.x折腾记 - (5) 记录用React开发项目过程遇到的问题(Webpack4/React16/antd等)
CRPER
10-29 3538
前言 自己搭的脚手架,坑都是一步一步踩完的; 技术栈: react@16.6.0/ react-router-dom@v4 / webpack^4.23.1(babel7+) 闲话不多说,直入主题,有兴趣的可以瞧瞧,没兴趣的止步,节约您的时间. 问题列表 问题一:history模式下,接口和请求冲突的问题 就是反向映射接口和请求的根路径重叠,如下: proxy: { ...
react_T_v18
Pwsifeng的博客
06-16 1659
初学者
react基本引入文件
08-04
里面有五个文件，如果用的是react15版本的就引入react.min.js，react-dom.min.js,browser.min.js;要是用react16版本的就引入react.production.min.js，react-dom.production.min.js,dom.min.js,browser.min.js三个文件
Bpmn.js详细入门，创建节点，删除节点（章节一）
最新发布
xye1230的博客
07-04 1457
前言首先这玩意没有一个标准的中文官方文档，英文的也没有，英文只有一个官方的各种案例，所以需要学习全面，还是得去官网的案例里面找因为我在学这个的时候，网上搜到的很多信息都已经很老了，导致组件在使用过程中很多写法不对，甚至引入路径都找不到，所以我还是决定写一个相对新一点的，这里就给大家入个门，讲一些基本使用，以及我个人在过程中遇到的东西，希望能帮到你这里是官网案例链接。
01-使用Script标签的形式实现HelloReact
魏大大
12-06 700
创建第一个React应用，并在页面上显示“Hello React”字样。本文致力于使用标签的方式，实现最基础的React应用。编写React应用时，至少需要引入以上三个JS库，其中，是React的核心库，属于扩展库，用于操作DOM，可以将ES6语法转为ES5，同时支持JSX转为JS。在文件的前以形式引入以上三个JS库。注意：标签引入React相关JS库时，需要先引入React核心库（＊）！ 也可以使用CDN方式引入，避免下载React相关文件。 3. 编写React代码 React容器React会将所有
React中异步引入script标签
AndyQsmart的专栏
09-16 6192
公众号：程序员波波 React中支持异步加载script，通过react-loadable可以在React中异步import。 但是目前遇到一个问题，引入全局的script标签。但是如果把所有标签全部写在index.html中的话，那么第一页加载的速度会变慢，所以希望实现异步引入script标签的方法。 目前通过document.createElement的方法来动态创建脚本标签，然后通...
React中同步引入script标签
AndyQsmart的专栏
09-16 6787
公众号：程序员波波 之前写了一篇异步引入的博客，但是在开发中遇到，可能某些js之间有调用关系，那么引入的时候就需要按照一定的顺序进行同步引入。 这里采用了递归的方式： class Tools { static loadScript(url, callback) { let old_script = document.getElementById(url)...
为react动态添加script标签并执行
qq_36777191的博客
04-02 4059
如果在componentWillMount中插入，只能指定root，因为此时页面还没有渲染出来，找不到append元素，需要在指定位置渲染，就要在componentDidMount中此时元素已经渲染完成，在项目中直接用了hooks,效果一样 useEffect(()=>{ let script2 = document.createElement('script'); script2.type = 'text/javascript'; script.
React基础
qq_45555892的博客
02-16 1035
react 1.React基本用法、脚手架、JSX React安装命令: npm i react react-dom react 包是核心，提供创建元素，组件等功能 react-dom 包提供DOM相关功能 React基本使用 //一.引入react和react-dom的两个js文件 <script src="./node_modules/react/umd/react.developm...
React 组件js文件中如何引入其他的js 文件数组
datouniao1的博客
09-20 1991
在编写react 组件，特别是表格的过程中，我个人是最看不得，整个js文件感觉很多的内容，而且数组，函数，html代码都有，整体看起来分邋遢，我使用的是antd的Table 来渲染表格 我们看这样的一串表头 用户 名称，手机号码，邮箱，角色，备注，在渲染的时候，是用数组来进行渲染的，那么这段数组，在组件的文件中肯定也是占用很长的一部分 那我们肯定要试着将这段数组抽离出来，放到其他的文件中，然后在组件的js 文件中将这段数组引入，作为一个对象给 Table 的column的组件进行赋值， 首..
React基础—文件引入方式和理解
梦否
05-27 1815
1. 简单使用 1.1 环境 其实和jQuery类似，也可以使用html的文件引入方式来开发一个简单的Demo。可以查阅文档：在网站中添加 React – React (docschina.org) 开发环境引入文件： <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@1
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值