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 (

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 引用本地js_react组件中如何引入一个外部的js文件？相关推荐

从外部的js文件中获取ASPX页面的控件ClientID(get control reference from external javascript)...
前言当使用MasterPage.UserControl等容器时,为了避免控件的重复命名,asp.net会自动将容器中的控件生成一个ClientID(Control Tree中的可生成,否则不会生成) ...
路由到另外一个页面_如何在多个页面中，引入一个公共组件
应用场景在前端开发的过程中,时常有这样的一个需求,需要将某个组件,展示在不同的页面中.常见的有,头部菜单栏.底部版权,如下图中的菜单,就需要在不同页面中进行显示. 解决方法假设有这样一个需求,希望 ...
mpvue 引入自己创建的js 文件到其他的文件中
1.mpvue 引入外部js 文件中的方法如果需要调用外部的js文件中的方法需要按照以下的格式进行写创建方法,将方法抛出 /** * 七牛上传文件工具方法 **/ function get ...
npm的插件如何直接在html中使用,webpack中html-webpack-plugin插件的使用（生成多个html页面，引入不一样的js文件）...
以html-webpack-plugin插件为例javascript 一.先安装插件,在命令行中输入:npm i -D html-webpack-plugin(执行完以后,在package.js的d ...
原生微信小程序引入公共方法（js文件）@令狐张豪
我们在写小程序的时候有很多方法是公共调用的,我们可以建一个公共的js文件然后去调用它. 1. 创建utils目录并创建util.js文件 2. 写入我们的公共代码 const baseUrl = 'x ...
react 引用本地js_从零配置webpack 4+react脚手架（二）
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
react如何在父组件中调用子组件事件
父组件是如何使用子组件的事件的,下边数值累加的例子类组件将子组件的this传到父组件,给父组件添加一个属性,值为this,之后就可以通过父组件的属性调用子组件的事件了 import React,{ ...
js中执行到一个if就停止的代码_Node 中如何引入一个模块及其细节
在 node 环境中,有两个内置的全局变量无需引入即可直接使用,并且无处不见,它们构成了 nodejs 的模块体系: module 与 require.以下是一个简单的示例 const fs = re ...
html页面怎么引用通用的头部,html 如何引入一个公共的头部和底部
html 静态页面中引用外部页面没那么方便,主要方法有: asp语言和PHP语言首先制作一个头部文件head.asp,或者一个底部文件foot.asp.如主页是index.asp,调用头部代码是在i ...

react 引用本地js_react组件中如何引入一个外部的js文件？

react 引用本地js_react组件中如何引入一个外部的js文件？相关推荐

最新文章

热门文章