三种方式:
1. 直接加载public 目录下的index.html中
直接在public 下的html文件下 加
2. 使用 react-load-script 插件动态引入
npm 安装
npm install react-load-script
使用
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)}
/>
>
);
}
}
export default DynamicScriptExample;
3. 自己用脚本在 react DOM渲染前,强制插入。。
大概意思如下
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)
})
}