如何在使用React.js加载第三方库时运行useEffect效果？
如何在使用React.js加载第三方库时运行useEffect效果？
提问于 2019-06-28 20:20:54
我正在尝试创建一个<Drift>组件来挂载Drift聊天服务：
Drift.js
import React, { useEffect, useState } from 'react'
export default function Drift (props) {
const [drift, setDrift] = useState(undefined)
// Evaluate the drift script once
useEffect(() => {
const script = document.getElementById('drift-script').innerHTML
window.eval(script)
}, [])
// Poll for drift availability
useEffect(() => {
const poller = setInterval(() => {
if (window.drift) {
setDrift(window.drift)
clearInterval(poller)
console.log('setDrift(fn) called')
}
}, 500)
return () => clearInterval(poller)
}, [])
// Configure the drift widget once
useEffect(() => {
console.log('drift depended effect triggered:')
console.log(typeof drift)
if (drift) {
console.log('drift is defined')
drift.config({
messages: {
welcomeMessage: 'Your code is being generated!'
}
})
drift.on('ready', function (api) {
console.log('drift ready')
api.widget.hide()
api.widget.show()
api.showWelcomeMessage()
})
}
else {
console.log('drift is undefined')
}
}, [drift])
return (
<div>
<script
id="drift-script"
dangerouslySetInnerHTML={{
__html: `
"use strict";
!function() {
var t = window.driftt = window.drift = window.driftt || [];
if (!t.init) {
if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ],
t.factory = function(e) {
return function() {
var n = Array.prototype.slice.call(arguments);
return n.unshift(e), t.push(n), t;
};
}, t.methods.forEach(function(e) {
t[e] = t.factory(e);
}), t.load = function(t) {
var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
var i = document.getElementsByTagName("script")[0];
i.parentNode.insertBefore(o, i);
};
}
}();
drift.SNIPPET_VERSION = '0.3.1';
drift.load('DRIFT_ID');
`
}}
/>
{ props.children }
</div>
)
}其思想是，一旦定义了window.drift，效果就会运行。但是，该效果只运行一次--当window.drift未定义时。
完整的日志是：
drift depended effect triggered:
Drift.js:30 undefined
Drift.js:51 drift is undefined
Drift.js:20 setDrift(fn) called如何创建对window.drift的引用，一旦定义了效果就会执行它？
回答 2
Stack Overflow用户
发布于 2019-06-29 03:27:38
您可以在head标记中添加Drift客户端作为脚本。
工作示例
要使其工作，添加脚本的内容，由漂移作为文本在一个文件。然后，通过创建脚本标记将其作为脚本加载到useEffect中。
useEffect(() => {
const script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.innerHTML = drift;
document.head.appendChild(script);
return () => script.parentNode.removeChild(script);
}, []);另外，如果你想在你的应用程序中使用它，你可以把它作为内联脚本标签添加到模板索引html文件中，webpack使用它。
Stack Overflow用户
发布于 2019-06-29 13:41:27
如果可以导入库，则最好是：
import Drift from 'drift'如果没有，我建议运行与index.js中的反应性无关的命令式代码。
import ReactDOM from 'react-dom'
...
!function() {
var t = window.driftt = window.drift = window.driftt || [];
...
ReactDOM.render(...)或者从index.html中的一个单独文件执行脚本(如果使用create，则在public文件夹中)：
<body>
<div id='root'>
<script src="drift.js"></script>
</body>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56812824
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号