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 = /]*>([\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:'
Error
'});});}

Aquí hay que notar que estamos indicando al State que en su propiedad demyHtmltendrá ese contenido y deberá actualizarlo en nuestra vista.

A grandes rasgos,nuestra Regex lo que hará será leer los