Me gustaría importar este paquete de javascript en React
<script src="https://cdn.dwolla.com/1/dwolla.js"></script>Sin embargo, no hay un paquete NPM, por lo que no puedo importarlo como tal:
import dwolla from 'dwolla'o
import dwolla from 'https://cdn.dwolla.com/1/dwolla.js'así que cada vez que intento
dwolla.configure(...)Recibo un error que dice que dwolla no está definido. ¿Cómo puedo solucionar esto?
Gracias
Vaya al archivo index.html e importe el script
<script src="https://cdn.dwolla.com/1/dwolla.js"></script>Luego, en el archivo donde se importa dwolla, configúrelo en una variable
const dwolla = window.dwolla;Esta pregunta está envejeciendo, pero encontré una buena manera de abordarla utilizando la biblioteca react-helmet que creo que es más idiomática para la forma en que funciona React. Lo usé hoy para resolver un problema similar a su pregunta de Dwolla:
import React from "react"; import Helmet from "react-helmet"; export class ExampleComponent extends React.Component { constructor(props) { super(props); this.state = { myExternalLib: null }; this.handleScriptInject = this.handleScriptInject.bind(this); } handleScriptInject({ scriptTags }) { if (scriptTags) { const scriptTag = scriptTags[0]; scriptTag.onload = () => { // I don't really like referencing window. console.log(`myExternalLib loaded!`, window.myExternalLib); this.setState({ myExternalLib: window.myExternalLib }); }; } } render() { return (<div> {/* Load the myExternalLib.js library. */} <Helmet script={[{ src: "https://someexternaldomain.com/myExternalLib.js" }]} // Helmet doesn't support `onload` in script objects so we have to hack in our own onChangeClientState={(newState, addedTags) => this.handleScriptInject(addedTags)} /> <div> {this.state.myExternalLib !== null ? "We can display any UI/whatever depending on myExternalLib without worrying about null references and race conditions." : "myExternalLib is loading..."} </div> </div>); } } El uso de this.state significa que React observará automáticamente el valor de myExternalLib y actualizará el DOM de manera adecuada.
Crédito: https://github.com/nfl/react-helmet/issues/146#issuecomment-271552211
para desarrolladores de mecanografiados
const newWindowObject = window as any; // lanzarlo con cualquier tipo
let pushNotification = newWindowObject.OneSignal; // ahora se podrá acceder al objeto OneSignal en mecanografiado sin error