在react中怎么引用js

在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 (
            <>
            <Script
              url="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"
              onCreate={this.handleScriptCreate.bind(this)}
              onError={this.handleScriptError.bind(this)}
              onLoad={this.handleScriptLoad.bind(this)}
            />
            <div>动态脚本引入状态:{this.state.scriptStatus}</div>
            </>
        );
    }
}
export default DynamicScriptExample;

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

Image placeholder
前端答疑
未设置
  34人点赞

没有讨论,发表一下自己的看法吧

推荐文章
怎么在react中安装修饰器

怎么在react中安装修饰器在create-react-app下使用es7的@修饰器会报错''Supportfortheexperimentalsyntax'decorators-legacy'isn

怎么在react中使用weui

怎么在react中使用weui1、react没有安装的情况下:安装react和weuinpminstall--savereactreact-dom npminstall--saveweui@1.1.0

jquey怎么引用css样式

jquey怎么引用css样式jquery引用css只需要一行代码即可,通过传入一个标签,来创建link标签,传入type、href、以及rel给link标签添加属性,最后再调用appendTo方法,将

jsp怎么引入css样式?

JSP页面引入CSS样式有三种方法,且其优先级不同。具体如下:外部样式,内嵌样式,行内样式。优先级依次增高!下面给大家具体介绍一下:1、外部样式jsp可以在link标签中使用href属性引入css文件

如何在react加css样式?

react加css的3种方法:1.行内样式直接给对应的DOM元素添加style属性,遵循react的规则,写在{}当中。ThisisPage1!2.声明样式render(){   letmystyle

如何优雅的在react-hook中进行网络请求

推荐课程:前端开发工程师--学习猿地精品课程 前言Hook是在React16.8.0版本中新加入的特性,同时在React-Native的0.59.0版本及以上进行了支持,使用hook可以不用class

怎么用js和css写一个幻灯片

怎么用js和css写一个幻灯片思路如下:1、创建一个div,用来包裹所有的图片,并设置定位方式为relative;2、所有的图片设置定位方式为absolute;距离顶部为0;3、并使用css属性tra

小程序怎么用js修改css?

小程序怎么用js修改css?微信小程序和普通的前端开发有很多不同。前端开发中修改样式,js可以操作DOM,即document.getElementById(id).style.property=new

react中如何使用组件

react中如何使用组件前文我们介绍过了《如何写react组件》(感兴趣的同学可以过去学习),下面我们来说一下如何使用react组件。1、无状态组件的使用方法组件:constApp=(props)=>

如何将echarts集成到react中

如何将echarts集成到react中在使用echarts之前需要先安装echarts,可以直接使用node命令来安装npminstallecharts--save包依赖安装完毕后,这个时候我们的EC

react中的webpack是什么?

Webpack是一个开源的前端打包工具。Webpack提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。Webpack可以从终端、或是更改webpack.config

如何在Reworld里随机生成想要的物体

功能效果展示运行环境Win7,Win8,Win10Reworld版本体验版vc_redist.x64运行环境针对零基础读者的补充下载安装Reworld对应版本Reworld官网链接:http://ww

使用js来设置、读取、删除cookie的最佳代码(附换肤应用)

课程推荐:Java开发工程师--学习猿地--送7个上线商业项目 继上一篇文章中我们讲到cookie的概念,今天我们来写如何用js来设置cookie、读取cookie、删除cookie。本文代码来自网络

使用Javascript 开发个JSON解析库

课程推荐:Java开发工程师--学习猿地--送7个上线商业项目 现在无论什么编程语言都有很多的json解析库了,之所以写这个么软件,不是为了在实际的项目开发中使用它,而是为了锻炼自身的编程技巧,还是那

echarts怎么引入到vue中?

准备工作:首先我们初始化一个vue项目,执行vueinitwebpackechart。接着我们进入初始化的项目下,安装echarts,npminstallecharts-S //或 cnpminsta

axios怎么引入到vue中?

Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。在vue项目之中使用axios是一个非常明智的选择,因为vue官方已经宣称不再维护vue-resource,并且推荐使

.vue文件怎么引入本地图片

.vue文件怎么引入本地图片.vue文件引入本地图片,需要先将本地图片复制到项目的src\assets目录中,否则不能使用。然后在template标签中,使用img标签引用图片即可。本地图片路径:在.

零基础学习Swift中的数据科学

概述Swift正迅速成为数据科学中最强大、最有效的语言之一Swift与Python非常相似,所以你会发现2种语言的转换非常平滑我们将介绍Swift的基础知识,并学习如何使用该语言构建你的第一个数据科学

JavaScript中对“this”的简单理解

1.this的奥秘很多时候,JS中的this对于咱们的初学者很容易产生困惑不解。this的功能很强大,但需要一定付出才能慢慢理解它。对Java、PHP或其他标准语言来看,this表示类方法中当前对象的

JavaScript中的强制类型转换

JavaScriptprimitives(原语)JavaScript建立在一系列基本单元之上。你应该对其中的一些已经很熟悉了,比如字符串和数字:vargreet="Hello";varyear=89;

JavaScript中的Infinity(无穷)

Infinity(无穷)在JS中是一个特殊的数字,它的特性是:它比任何有限的数字都大,如果不知道Infinity,我们在一些运算操作遇到时,就会觉得很有意思。现在我们来看看JS中的Infinity属性

如何在JavaScript中操作数组?

JavaScript中的数组是什么?在开始之前,你需要先了解数组的真正含义。在JavaScript中,数组是一个用于存储不同数据类型的变量。它将不同的元素存储在一个盒子中,供以后使用。声明一个数组:l

深入讨论JavaScript中Set对象如何让代码更快

课程推荐:Java开发工程师--学习猿地精品课程 我确信有很多开发人员坚持使用基本的全局对象:数字,字符串,对象,数组和布尔值。对于许多用例,这些都是需要的。但是如果想让你的代码尽可能快速和可扩展,那

使用Jupyter NoteBook进行IB查询和交易,以及使用算法交易示例

在搞好IB盈透接口后,试了下客户端交易,但是最终目的还是使用程序化交易。发现vnpy已经提供的Script_engine来支持JupyterNoteBook交易的,而且非常方便调用。 这里就用写了基于

python使用jieba实现中文文档分词和去停用词

分词工具的选择:  现在对于中文分词,分词工具有很多种,比如说: jieba分词、thulac、SnowNLP等。在这篇文档中,笔者使用的jieba分词,并且基于python3环境,选择jieba分词