Saltar al contenido

Carga de scripts externos en un reaccionan componentNov, 28thIn este tutorial, vamos a aprender acerca de cómo cargar externa …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo cargar scripts externos ina reaccionan componente.

A veces tenemos que trabajar con bibliotecas js externos en estos casos tenemos que insertar un etiquetas script en componentes, pero en reaccionar utilizamos JSX, así que no podemos añadir etiquetas script directamente al igual que cómo le sumamos en HTML.

Cargando guión en un componente

En este ejemplo, estamos utilizando los árbitros para acceder al elemento HTML componente y añadir el archivo de script externo.

import React,{Component} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
componentDidMount() {
const script = document.createElement("script"); script.async = true; script.src = "https://some-scripturl.js"; this.div.appendChild(script); }
render() {
return (

(this.div = el)}>

Hello react

{/* Script is inserted here */}

);
}
}

export default App;

Salida:

Carga de scripts en la cabeza o el cuerpo

En este ejemplo, vamos a ver cómo cargar un archivo de script externo en una cabeza o el cuerpo elementos.

import React,{Component} from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
componentDidMount() {
const script = document.createElement("script");
script.async = true;
script.src = "https://some-scripturl.js";
//For head
document.head.appendChild(script);
// For body
document.body.appendChild(script); }
render() {
return (

Hello react

);
}
}