Aunque es una acción que debería ser evitada, puede haber los casos en los que nos toque llamar contenido de terceros que viene como HTML e imprimirlo en nuestro sitio.
Realmente es algo bastante fácil de hacer, sin embargo, ¿qué pasa cuando viene con código JS y CSS?, he ahí la cuestión. Para este tutorial usaremos Axios y React básico.
Para instalar axios basta con correr el comando npm install axios --save y una vez instalado, vamos a llamarlo en nuestro componente que traerá el HTML con:
...
import axios from 'axios';
...Una vez que cargamos Axios hay que generar una función que nos traerá los datos:
getHtml() {
axios.get('https://example.com').then(response => {
const extractScriptRegex = /<script\b[^>]*>([\s\S]*?)<\/script>/gmi;
let scriptsExtracted;
let innerHtml = response.data;
while(scriptsExtracted = extractScriptRegex.exec(response.data)) {
innerHtml = innerHtml.replace(scriptsExtracted[0], '');
window.eval(scriptsExtracted[1]);
}
this.setState({ myHtml: innerHtml });
}).catch(error => {
this.setState({ myHtml: '<h1>Error</h1>' });
});
}Aquí hay que notar que estamos indicando al State que en su propiedad de myHtml tendrá ese contenido y deberá actualizarlo en nuestra vista.
A grandes rasgos, nuestra Regex lo que hará será leer los <script> y sacar su contenido, no importa si es <script> o <script type="text/javascript"> o <script type='text/javascript'> entre otros.
Después, para evitar usar la respuesta directamente, lo asignamos a una variable que se irá limpiando, es decir, una vez que ya encontramos cada coincidencia gracias a nuestro ciclo while el código de respuesta deberá ser limpiado paratener un HTML sin más código JS dentro de y este, se ejecutará directamente gracias a window.eval cabe destacar que esto es un riesgo alto y no se recomienda.
¿Por qué demonios estoy haciendo esto entonces?, bueno, solo como contexto, estoy actualmente manejando un “widget” de búsqueda de BestDay lo que este “widget” originalmente usa jQuery y hace una petición POST que retorna un código HTML con JS incrustado y CSS y demás, a lo que yo lo ocupaba integrar a React y por ello es que decidí compartir con ustedes este tutorial de cómo hacerlo por si les sirve.
Ahora bien, ya que tenemos entonces nuestra función dentro de nuestro constructor al prop le agregaremos nuestro state de myHtml
constructor(props) {
super(props);
this.state = {
myHtml: ''
};
}Y listo ya casi hemos terminado, nos faltan dos pasos, mostrar en pantalla y llamar nuestra función.
Primero vamos a llamar la función, para esto se hace dentro del ciclo de componentDidMount ya que el código deberá ejecutarse una vez el componente ya se creó.
componentDidMount() {
this.getHtml();
}Y por último su asignación dentro del render() :
render() {
const { myHtml } = this.state;
return(
<div>
<div dangerouslySetInnerHTML={{ __html: myHtml }}></div>
</div>
);
}Notemos que aparece un atributo llamado dangerouslySetInnerHtml este como su nombre lo indica, es muy peligroso asignar HTML externo, pero pues en este caso “no hay de otra”.
Y listo, veremos en pantalla nuestro HTML.
Espero te haya servido este tutorial si es lo que estabas buscando y recuerda, si puedes, evita este tipo de situaciones.
