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,一经查实,立即删除!

相关文章

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

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

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

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

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

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

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

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

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

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

js能订阅mq吗_测试工程师,必须了解的MQ知识!

什么是消息中间件&#xff1f;通过提供某种规范实现在不同系统之间传递语义准确的消息。专注于数据的发送和接收&#xff0c;利用高效可靠的异步消息传递机制的集成分布式系统。什么是MQ?MQ全称为Message Queue, 消息队列(MQ)是应用程序“对”应用程序的通信方法&#xff0c;也…

98k计算机版教程,绝地求生正式版八倍镜98k瞄准教程 新版98K怎么用?

《绝地求生大逃杀》正式版已经更新&#xff0c;新版本中官方对原有的四倍镜和八倍镜进行了不小的改动。正式版98K怎么用&#xff1f;接下来就为大家带来新版八倍镜98k瞄准教程&#xff0c;感兴趣的玩家一起来看看吧&#xff01;教程&#xff1a;新版本的八倍镜更新了新的瞄准样…

csv中包含多余换行符_Python3爬虫之猫眼电影TOP100(requests、lxml、Xpath、CSV)

点击关注&#xff0c;我们共同每天进步一点点&#xff01;【1x00】循环爬取网页模块观察猫眼电影TOP100榜&#xff0c;请求地址为&#xff1a;https://maoyan.com/board/4每页展示10条电影信息&#xff0c;翻页观察 url 变化&#xff1a;第一页&#xff1a;https://maoyan.com/…

创新品类,N次方的市场爆炸力

一、品类的诱惑力 可乐&#xff1a;一种碳酸饮料&#xff1b;营养快线&#xff1a;一种牛奶果汁&#xff1b;饮养高层&#xff1a;一种高端饮养品&#xff1b;防电墙热水器&#xff1a;一种有安全装置的电热水器&#xff1b;香飘飘&#xff1a;一种可以即冲泡饮的杯装奶茶……这…

计蒜客可以做计算机编程吗,如果你的编程能力不足以支撑你成为工程师的野心,不妨到计蒜客上学学看...

在人才招聘领域存在这样一个怪圈&#xff0c;高校每年都说是最难就业年、人才过剩&#xff0c;而对于企业HR来说永远都招不到称心如意的人才。这个怪圈在“计蒜客”创始人俞昊然看来&#xff0c;主要是因为当今高校的教学资源太过陈旧&#xff0c;没有跟上业内发展的需求&#…

百善计算机学习,党建引领学做合一,志愿服务助力乡村振兴——计算机工程学院开展“百善孝为先”主题宣传文化墙墙绘涂鸦活动...

为充分发挥党员的先锋模范作用和当代大学生学做合一的品质&#xff0c;用实际行动助力乡村振兴&#xff0c;2019年5月18日&#xff0c;计算机工程学院党员服务站组织学生党员及第57期党校积极分子赴郫都区郫筒街道长乐村开展“百善孝为先”主题宣传文化墙墙绘涂鸦活动,为乡村振…

计算机里的东西不小心删除如何恢复,原先在电脑界面上的文件不小心删除了怎么恢复,谢谢了...

那就得看看删除的方式是哪种的了&#xff0c;如果是普通删除的文件&#xff0c;可以打开回收站查看是否有想文件的存在&#xff0c;如果有的话进行还原的操作&#xff0c;如果未发现的话&#xff0c;可以参考下述的恢复教程进行文件的恢复工作&#xff1a;步骤一&#xff1a;到…

我的处女作《设计模式之禅》——前言

终于可以写前言了&#xff0c;这说明本书已经基本完成&#xff0c;可以长嘘一口气了。 为什么写这本书 为什么写这本书&#xff1f;今年5月份&#xff0c;我在JavaEye上发了一个帖子&#xff0c;其中提到自己已经工作9年了&#xff0c;总觉得这9年不应该就这么荒废了&#xff0…

UML 图例

对UML不是很了解&#xff0c;简单地了解一下UML设计中有的图例及基本作用。首先对UML中的各个图的功用做一个简单介绍&#xff1a; 1、用例图 描述角色以及角色与用例之间的连接关系。说明的是谁要使用系统&#xff0c;以及他们使用该系统可以做些什么。一个用例图包含了多个模…

服务器与本地文件共享文件夹,云服务器对本地服务器共享文件夹

云服务器对本地服务器共享文件夹 内容精选换一换当您成功创建私有镜像后&#xff0c;镜像的状态为“正常”&#xff0c;您可以使用该镜像创建服务器实例或云硬盘&#xff0c;也可以将镜像共享给其他帐号&#xff0c;或者复制镜像到其他区域。私有镜像的生命周期如图1所示。远程…

服务器可否替代手机芯片,基于ARM的处理器能取代桌面处理器吗?

科技的发展速度太快了&#xff0c;从手机进入智能时代开始&#xff0c;手机处理器的速度也越来越快了&#xff0c;以前人们办公都是在电脑端进行的&#xff0c;随着手机的功能越来越多&#xff0c;手机处理器速度越来越快&#xff0c;已经有一小部分的工作可以在手机上完成了。…

VS2010 RTM

Visual Studio 2010 已经RTM并且在Msdn subscription提供了下载和试用版本&#xff0c;为了迎接这一产品&#xff0c;我在这个周末格式化了系统分区重新安装了Windows 7 x64。 在最新的Visual Assist配合下&#xff0c;整个IDE较之之前的版本更加舒适。 比如&#xff0c;选中的…

个人宣传画

转载于:https://www.cnblogs.com/yellowyu/archive/2010/04/19/1715735.html

韩寒说世博会

先声明:我不是韩寒的什么粉丝,也不太关注这些作家的事情,希望这些文字能让你想到一些什么东西...........转载自:http://tieba.baidu.com/f?kz752703402 最近&#xff0c;老是有媒体要关于世博会采访我&#xff0c;我觉得很为难&#xff0c;如果我赞美他吧&#xff0c;估计我良…

windows系统下的云服务器部署tomcat

在环境配置没问题的基础下&#xff0c;如果启动服务器缺无法打开默认页面&#xff0c;则很有可能说明是你的端口问题&#xff1a; 这里我的解决方法&#xff1a; 控制面板-->系统和安全-->Windows 防火墙-->高级设置-->入站规则-->新建规则 依次选择端口-->…