How to introduce an external js file into the react component?

problem description

how to introduce the official account of Wechat"s js file ( http://res.wx.qq.com/open/js/.)

into a component of the React project

introduced in index.html is introduced throughout the project. I only want to introduce it in the current component. What should I do?

React.js
Apr.09,2021

recommends two imported methods, of course, you can write a JS class (ES6 syntax) to dynamically insert JS into the page, and then introduce it in the React project.

first: use the plug-in react-load-script,. If you don't have it installed, you can use yarn add react-load-script or npm install react-load-script, to see which package management tool you use.

then you can insert the following code in JS, as you would with the React component. 

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;

the second is introduced directly in the index.html under the project / Public directory.

roughly means something like this 

export default function getAMap() {
  var isLoaded = true
  return new Promise(function (resolve, reject) {
    if (isLoaded) {
      window.AMap.plugin(['AMap.MouseTool', 'AMap.PolyEditor'], () => {
        resolve(window.AMap)
      })
      return
    }
    
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.async = true
    script.src = 'http://webapi.amap.com/maps?v=1.4.3&key=key&callback=$$$maptcinit&plugin=AMap.MouseTool'
    // script.onload = resolve
    script.onerror = reject
    script.onload = function () {
      isLoaded = true
      resolve(window.AMap)
    }
    document.head.appendChild(script)
  })
}

what's wrong with the global situation? Wechat just recommends that you use global

to learn about createObjectUrl

.

Previous: WeChat Mini Programs is similar to the following multiple selections. How to write components?

Next: How does mongoose implement a module to query and assign multiple routing templates?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e495f7-65344.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e495f7-65344.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?