react引入html文件_react直接引用第三方js库（可直接用于浏览器html的js文件）...

三种方式&＃xff1a;

1. 直接加载public 目录下的index.html中

直接在public 下的html文件下 加

2. 使用 react-load-script 插件动态引入

npm 安装

npm install react-load-script

使用

import React from &＃39;react&＃39;;

import Script from &＃39;react-load-script&＃39;;

class DynamicScriptExample extends React.Component {

constructor(props) {

super(props);

this.state &＃61; {

scriptStatus: &＃39;no&＃39;

}

}

handleScriptCreate() {

this.setState({ scriptLoaded: false })

}

handleScriptError() {

this.setState({ scriptError: true })

}

handleScriptLoad() {

this.setState({ scriptLoaded: true, scriptStatus: &＃39;yes&＃39; })

}

render() {

return (

<>

onCreate&＃61;{this.handleScriptCreate.bind(this)}

onError&＃61;{this.handleScriptError.bind(this)}

onLoad&＃61;{this.handleScriptLoad.bind(this)}

/>

>

);

}

}

export default DynamicScriptExample;

3. 自己用脚本在 react DOM渲染前&＃xff0c;强制插入。。

大概意思如下

export default function getAMap() {

var isLoaded &＃61; true

return new Promise(function (resolve, reject) {

if (isLoaded) {

window.AMap.plugin([&＃39;AMap.MouseTool&＃39;, &＃39;AMap.PolyEditor&＃39;], () &＃61;> {

resolve(window.AMap)

})

return

}

var script &＃61; document.createElement(&＃39;script&＃39;)

script.type &＃61; &＃39;text/Javascript&＃39;

script.async &＃61; true

script.src &＃61; &＃39;http://webapi.amap.com/maps?v&＃61;1.4.3&key&＃61;key&callback&＃61;$$$maptcinit&plugin&＃61;AMap.MouseTool&＃39;

// script.onload &＃61; resolve

script.onerror &＃61; reject

script.onload &＃61; function () {

isLoaded &＃61; true

resolve(window.AMap)

}

document.head.appendChild(script)

})

}