Cómo mostrar html externo en la ventana de reproducción

Question

En la react estoy actual usando la biblioteca reactjs-popup Desde un componente llamo a una ventana de Popup así: return( <> { displayCustomFields() } ) En el componente popup tengo esto: return ( {}} onOpen={function noRefCheck() {}} position= bottom center  repositionOnResize trigger={ getPreviewTemplate()}>Preview } > {I'd like to load some external html here} ); Como se indica en el componente Popup Me gustaría cargar algunos html de una página externa en el popup básicamente una página html completa. ¿Cómo haría esto? Por html externa me refiero a  https.example.com/mypage.html

Gpt · Accepted Answer

Para cargar contenido HTML externo en tu componente Popup en React, puedes utilizar el método fetch o axios para obtener el contenido HTML de la URL externa y luego mostrarlo en tu Popup. Aquí te muestro un ejemplo de cómo hacerlo utilizando fetch:

jsx
import React, { useState, useEffect } from 'react';

const PopupComponent = () => {
  const [externalHtml, setExternalHtml] = useState('');

  useEffect(() => {
    fetch('https://example.com/mypage.html')
      .then(response => response.text())
      .then(html => setExternalHtml(html))
      .catch(error => console.log(error));
  }, []);

  return (


        }
      >


      
    
  );
};

export default PopupComponent;

En este caso, el contenido HTML externo de la URL 'https://example.com/mypage.html' se obtiene mediante la función fetch en el hook useEffect. Luego, el contenido HTML se guarda en el estado externalHtml y se muestra en el componente a través de la propiedad dangerouslySetInnerHTML, que permite mostrar HTML sin escapar.

Recuerda que usar dangerouslySetInnerHTML implica tener cuidado con el contenido que se está incrustando, para evitar posibles vulnerabilidades de seguridad. Asegúrate de confiar en la fuente de contenido externo que estás cargando.

Respondida el Dec 18, 2020 a las 21:00 - por Gpt

Votos positivos: 0 | Votos negativos: 0

Gemini · Answer

Para mostrar HTML externo en la ventana de reproducción utilizando la biblioteca reactjs-popup, puedes seguir estos pasos:

1. Instalar html-react-parser:

Instala el paquete html-react-parser usando npm o Yarn:


npm install html-react-parser --save

2. Importar html-react-parser:

Importa html-react-parser en tu componente Popup:

javascript
import { render } from 'html-react-parser';

3. Recuperar el HTML externo:

Utiliza fetch() o cualquier otra biblioteca de red para recuperar el HTML externo desde la URL especificada:

javascript
const fetchExternalHtml = async () => {
  const response = await fetch('https.example.com/mypage.html');
  const html = await response.text();
  return html;
};

4. Renderizar el HTML externo:

En el método de renderizado de tu componente Popup, llama a render() de html-react-parser para renderizar el HTML externo recuperado como un componente React:

javascript
return (
  
    {render(await fetchExternalHtml())}
  
);

Esto renderizará el HTML externo dentro de la ventana de reproducción.

Ejemplo completo:

javascript
import React, { useState, useEffect } from 'react';
import { Popup } from 'reactjs-popup';
import { render } from 'html-react-parser';

const CustomPopup = ({ custom, customFields }) => {
  const [externalHtml, setExternalHtml] = useState(null);

  useEffect(() => {
    const fetchExternalHtml = async () => {
      const response = await fetch('https.example.com/mypage.html');
      const html = await response.text();
      setExternalHtml(html);
    };

    fetchExternalHtml();
  }, []);

  return (
    
      {externalHtml && render(externalHtml)}
    
  );
};

export default CustomPopup;

Respondida el Dec 18, 2020 a las 21:04 - por Gemini

Cómo mostrar html externo en la ventana de reproducción

2 Respuestas: