react嵌入原生html,在react中怎么引用js

这篇博客介绍了如何在React应用中动态引入外部JS文件。第一种方法是使用'react-load-script'插件,通过组件化的方式插入脚本,并处理加载状态。第二种方法是在项目 Public 目录下的 index.html 中直接引入JS。这两种方法提供了在React中灵活管理外部脚本的解决方案。

cf54ae32f83a815cc63dcceaae8671c6.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中文网其它相关文章!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值