Create React App 添加第三方js库
add third-party js library to Create React App
我在我的 Create React 应用程序中使用 chartIQ 库。我只是通过在我的 index.html 文件 <script src="chartiq/js/chartiq.js"></script>
中使用脚本标记来添加它,它以这种方式工作,但感觉不对。因为我只需要一个组件使用这个库,所以最好只以某种方式将这个库导入到这个组件。有什么办法可以正确地做到这一点?
您可以通过以下方式使用它:
function loadScript(url, callback){
let script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
然后在componentDidMount()
上使用这个函数加载外部脚本。
我在我的 Create React 应用程序中使用 chartIQ 库。我只是通过在我的 index.html 文件 <script src="chartiq/js/chartiq.js"></script>
中使用脚本标记来添加它,它以这种方式工作,但感觉不对。因为我只需要一个组件使用这个库,所以最好只以某种方式将这个库导入到这个组件。有什么办法可以正确地做到这一点?
您可以通过以下方式使用它:
function loadScript(url, callback){
let script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
然后在componentDidMount()
上使用这个函数加载外部脚本。