Cómo renderizar HTML en React

Descubra cómo renderizar 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 agregando{myString}haciaJSXestaba escapando del HTML ... ¡así que las etiquetas HTML se le mostraron al usuario!

¿Cómo lo resolví? Vi 2 soluciones, básicamente. El primer nativo, el segundo requirió una biblioteca.

Primera solución: utilizardangerouslySetInnerHTML

Puedes usar eldangerouslySetInnerHTMLatributo en un elemento HTML para agregar una cadena HTML dentro de su contenido:

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

Recuerda que se llamapeligrosamentepor una razón. HTML no se escapa en absoluto en este caso, y puede causarXSScuestiones.

Pero hay buenos casos de uso para esto.

Segunda solución: use una biblioteca de terceros

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

Uno de ellos es elreact-html-parserBiblioteca.

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

Advertencia: en el momento de escribir este artículo, no se ha actualizado en los últimos 2 años, por lo que las cosas podrían romperse en el futuro. Funcionó para mí.

Cual usar?

Puede buscar otras bibliotecas similares, pero al final elegí usar eldangerouslySetInnerHTMLcamino.

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

Descarga mi gratisReact Handbook


Más tutoriales de react: