菜单 学习猿地 - LMONKEY

 在react中怎么引用js

在react中怎么引用js

叮叮当当 profile image 叮叮当当 ・1 min read

在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)