Cómo renderizar HTML en React

Descubra cómo representar una cadena HTML en el DOM sin escapar, usando React

Tuve este problema: necesitaba agregar una cadena HTML en una aplicación React, proveniente de un editor WYSIWYG, pero simplemente agregarla {myString}al JSX estaba escapando del HTML, ¡así que las etiquetas HTML se mostraban al usuario!

¿Cómo lo resolví? Vi 2 soluciones, básicamente. La primera nativa, la segunda requería una biblioteca.

Puede utilizar el dangerouslySetInnerHTMLatributo en un elemento HTML para agregar una cadena HTML dentro de su contenido:

div  dangerouslySetInnerHTML={{    __html: props.house.description  }}/div

Recuerda que se llama “peligroso” por una razón. En este caso, el código HTML no se escapa en absoluto y podría causar problemas XSS .

Pero hay buenos casos de uso para esto.

Hay muchas bibliotecas que implementan la funcionalidad dangerouslySetInnerHTMLproporcionada, de una manera más sencilla.

Una de ellas es la react-html-parserbiblioteca.

Consulte la biblioteca en GitHub: https://github.com/wrakky/react-html-parser

Advertencia: al momento de escribir esto, no se ha actualizado en los últimos 2 años, por lo que es posible que algunas cosas no funcionen en el futuro. A mí me funcionó.

Podrías buscar otras librerías similares, pero al final opté por utilizar esta dangerouslySetInnerHTMLvía.

Este nombre de aspecto peligroso era un recordatorio incorporado para prestar atención a la inclusión correcta en la lista blanca de las etiquetas HTML que permití que el usuario ingresara en esa cadena HTML.

Tal vez te puede interesar:

1. Formularios HTML
2. Cómo cargar una imagen en un lienzo HTML
3. Cómo utilizar insertAdjacentHTML
4. Cómo cambiar la URL de una imagen HTML en modo oscuro