Я пытаюсь создать компонент <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, которая вызываетэффект, который будет выполнен, как только он будет определен?