react中引入html文件,在react中怎么引用js

9ea4f6f292a4eb24195f875d1599d983.png

在react中怎么引用js

推荐两种引入的方法,当然也可以自己编写一个JS类(ES6语法)实现动态插入JS到页面,然后在React项目引入。

第一种:使用插件 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';

class DynamicScriptExample extends React.Component {

constructor(props) {

super(props);

this.state = {

scriptStatus: 'no'

}

}

handleScriptCreate() {

this.setState({ scriptLoaded: false })

}

handleScriptError() {

this.setState({ scriptError: true })

}

handleScriptLoad() {

this.setState({ scriptLoaded: true, scriptStatus: 'yes' })

}

render() {

return (

<>

onCreate={this.handleScriptCreate.bind(this)}

onError={this.handleScriptError.bind(this)}

onLoad={this.handleScriptLoad.bind(this)}

/>

动态脚本引入状态:{this.state.scriptStatus}

>

);

}

}

export default DynamicScriptExample;

第二种:直接在 项目/Public 目录下的 index.html 中引入。

本文来自React答疑栏目,欢迎学习!

以上就是在react中怎么引用js的详细内容,更多请关注html中文网其它相关文章!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/381141.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 课程设计 夏敏捷_Python课程设计(微课视频版21世纪高等学校通识教育规划教材)/计算机技术入门丛书...

目录第1章 序列应用——猜单词游戏1.1 猜单词游戏功能介绍1.2 程序设计的思路1.3 关键技术1.3.1 序列数据结构I1.3.2 random模块1.4 程序设计的步骤第2章 函数应用——万年历2.1 万年历功能介绍2.2 程序设计的思路2.3 程序设计的步骤第3章 Tkinter图形界面应用——图形界面万年…

css中em与px的介绍及换算方法

em是什么&#xff1f; em指字体高&#xff0c;任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em16px。那么12px0.75em, 10px0.625em。为了简化font -size的换算&#xff0c;需要在css中的body选择器中声明Font-size62.5%&#xff0c;这就使em值变为16px*62.5…

用计算机奏音乐,计算机音乐

《计算机音乐》这是一款非常好用的使用计算机发声进行演奏音乐的软件&#xff0c;当计算机成为了乐器&#xff0c;你手里的钢琴它还会香吗&#xff1f;随时随地掏出你那不可思议的计算机&#xff0c;进行非凡的音乐演奏吧~这里拥有丰富的曲目&#xff0c;任你选择&#xff01;计…

计算机无法访问桌面,桌面无法显示_电脑桌面显示:无法访问,你可能没有权限使用网络......

电脑桌面图标不能显示是什么原因&#xff1f;电脑桌面图片不显示有以下几种原因:一、在桌面点击右键&#xff0c;然后选择查看&#xff0c;显示桌面图标按钮。勾选按钮后桌面突变便可以显示出来。如果是开机不能操作是死机了&#xff0c;重启一下电脑试试&#xff0c;还是不行开…

Linq Group By 注意点

比如有如下的Linq查询&#xff1a; var q from s in agedDebtCollectiongroup s by s.SalesPersonCode into pselect new{Key p.Key,//here can not using p.Select(s>s).Single().SalesPerson// or p.Single().SalesPersonSalesPersonName p.Max(s>s.SalesPerson),Cu…

python 爬虫 音乐下载 歌手_python爬虫批量下载全民K歌音乐

标签&#xff1a;爬虫网址示例: https://node.kg.qq.com/personal?uid639e9983222a338a直接上源码:import requestsimport timeimport reimport jsonimport pprintimport mathimport osheader{User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, lik…

计算机在智能交通应用,计算机技术在智能交通系统的应用

摘要&#xff1a;借助智能交通系统&#xff0c;优化公共交通运行效率&#xff0c;为人们提供更大的便利。文章对智能交通系统内涵进行了简要分析&#xff0c;并从数据处理系统、交通监控系统、车辆导航系统以及车辆辅助驾驶系统4个方面对计算机技术在智能交通系统中的应用展开了…

快乐是什么

有时候快乐就是一只烤鸡腿&#xff0c;耶&#xff0c;就这么简单转载于:https://www.cnblogs.com/haozime/archive/2010/01/11/2639247.html

信息系统项目管理师论文_「高项论文」谨防信息系统项目管理师论文12个写作丢分点...

2020年上半年信息系统项目管理师论文怎么写才能得高分&#xff1f;有些时候洋洋洒洒写下一大篇&#xff0c;自我感觉良好&#xff0c;结果分数不如意。这可能是你触到了丢分点而不自知。慧翔天地给你提供信息系统项目管理师12个论文写作丢分点以及对应解决方法&#xff0c;供你…

html%3ca%3e标签,How do I encode “” in a URL in an HTML attribute value?

click meIs correct, although ‘&’ is more commonly used than ‘&’ or ‘,’.If the ‘stringByAddingPercentEscapesUsingEncoding’ method does what it says on the tin, it should work(*), but the NSString documentation looks a bit unclear on which ch…

java wed登录面 代码_JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)...

下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码&#xff0c;一起看看吧。一、ServletJSPJavaBean开发模式(MVC)介绍ServletJSPJavaBean模式(MVC)适合开发复杂的web应用&#xff0c;在这种模式下&#xff0c;servlet负责处理用户请求&#xff0c;jsp…

.net类库学习(一)System.object

System.Object 是基类&#xff0c;.NetFramework 中的所有其他类都从这个类派生而来。派生的.net类可以使用这个类的属性&#xff0c;而且那些类可以使用Object类的成员。 方法&#xff1a; Object.Equals 1 publicstaticboolEquals(object,object);//静态成员2 publicvirtualb…

武汉科技大学计算机生命与科学周海,湖北双胞胎周海周洋:为了母亲,一个放弃清华,一人放弃中科院...

“你要相信命运给你一个比常人较低的出发点&#xff0c;是希望你用一生去奋斗出一个柳暗花明的故事”。人的命运就是这样&#xff0c;从来没有真正“完美”的样子&#xff0c;奋斗和努力是改变命运的最重要力量。高考对于贫困山区或农村的孩子来说&#xff1a;这就是命运转折点…

循环左移和循环右移指令_运用 移位、循环移位指令 实现流水灯

具体要求用 I0.0 控制接在 QB0 上的8个彩灯是否移位&#xff0c;每 2s 左移 1 位。用 I0.1 控制左移&#xff0c;I0.2控制右移&#xff0c;首次扫描时将彩灯的初始值设置为 16#1 &#xff0c;设计出梯形图程序。先来讲解一下&#xff0c;移位指令和循环移位指令。移位指令这里的…

extjs中xtype类型

xtype Class------------- ------------------box Ext.BoxComponent 具有边框属性的组件button Ext.Button  按钮colorpalette Ext.ColorPalette 调色板component Ext.Component 组件container Ext.Container 容器…

vb.net html转xml文件,VB.Net将XSL转换应用于XML文件

我有一些由我的应用程序构建的XML。此XML将被删除为XML文件&#xff0c;然后我希望将XSL样式表应用于该文件&#xff0c;以便将其转换为HTML页面。但是&#xff0c;每次&#xff0c;它都会继续使用原始XML而不是转换后的HTML这是XML&#xff1a;MrGregoryHouseasasasas11:41asa…

PowerSocket对象与HostName

其实是因为&#xff0c;最近调用PowerSocket对象&#xff0c;PowerSocket需要取HostName的值&#xff0c;然后转换成IP地址。 来看看HostName命令&#xff0c;对了还要说明的是系统是Windows 2000 Professional。 HostName命令:作用:打印当前计算机&#xff08;主机&#xff09…

当前计算机无法连接,win7系统无法连接wifi提示此计算机当前已将连接限制为xxx的解决方法...

许多win7系统用户在工作中经常会遇到win7系统无法连接wifi提示此计算机当前已将连接限制为xxx的情况&#xff0c;比如近日有用户到本站反映说win7系统无法连接wifi提示此计算机当前已将连接限制为xxx的问题&#xff0c;但是却不知道要怎么解决win7系统无法连接wifi提示此计算机…

git设置master权限_git怎么控制成员的权限?

回答什么GIT权限管理的真的知道GIT的权限管理意味着什么么&#xff1f;GIT的权限管理是说控制用户能不能PUSH或者DELETE分支&#xff0c;或者能不能PUSH代码&#xff0c;而不是能不能访问某个目录的文件。对目录和文件的可读是GIT的最基本要求&#xff0c;不可能做到针对目录级…

计算机论文外文翻译,计算机专业毕业论文外文翻译2篇

《计算机专业毕业论文外文翻译2篇》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《计算机专业毕业论文外文翻译2篇(15页珍藏版)》请在人人文库网上搜索。1、武汉理工大学本科生毕业设计(论文)英文翻译毕业设计题目&#xff1a;会务管理系统的设计与实现学院(系)&…