菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
34
0

在react中怎么引用js

原创
05/13 14:22
阅读数 1996

在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 中引入。

发表评论

0/200
34 点赞
0 评论
收藏
为你推荐 换一批