Estoy trabajando en un SDK. Actualmente es compatible con JavaScript, sin embargo, necesita admitir React (y posiblemente Vue/Angular en el futuro).

Primero carga el SDK a través de un script. Luego modifica un elemento con el sdk-id . El usuario interactúa con el elemento y el SDK activa una devolución de llamada, AppNameSDK.callback(data) . Todo esto funciona bien en javascript vainilla, sin embargo, para React tengo problemas para descubrir cómo llamar a una devolución de llamada dentro del componente React.

En breve. ¿Cómo puedo A) llamar a una función/método de React Components desde un objeto cargado externamente o B) cambiar una función de objetos cargados externamente a través de un componente React?

Ejemplo de Vanilla Code (sin problemas)

 <div id="sdk-id" data-foo="foo" data-bar="bar"> </div> <script src="https://example.com/sdk/v1/client-id"></script> // Loads obj called AppNameSDK <script type="text/javascript"> AppNameSDK.callback = (data) => { console.log("data",data) } </script>

Ejemplo de React Code (no se puede acceder a la devolución de llamada)

 import React,{useEffect} from 'react'; const useScript = (url,loadFunc,errorFunc) => { useEffect(() => { const script = document.createElement('script'); script.src = url; script.async = true; document.body.appendChild(script); script.addEventListener('load', function () { if(loadFunc !== undefined && typeof loadFunc === "function"){ loadFunc(); } }); script.addEventListener('error', function (e) { console.log(); if(errorFunc !== undefined && typeof errorFunc === "function"){ errorFunc(); } }); return () => { if(document.body.contains(script)){ document.body.removeChild(script); } } }, [url,loadFunc,errorFunc]); }; const Test = () => { let scriptSrc = "https://example.com/sdk/v1/client-id"; useScript(scriptSrc); // Need to figure out how to call this function const callback = (data) => { console.log("data",data); } return ( <div className="test"> <h3>Test Component</h3> <div id="sdk-id" data-foo={"foo"} data-bar={"bar"}> </div> </div> ); }; export default Test;