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

三种方式：

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

/>

动态脚本引入状态：{this.state.scriptStatus}

>

);

}

}

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)

})

}