Tengo una plantilla de carta en línea que quiero mostrar en mi reactApp.
Mi correo electrónico está formateado con párrafos y encabezados en negrita. ¿Cómo puedo integrar el mismo formato en React sin tener que usar fuerza bruta e incluir muchas etiquetas?
Intenté usar un literal de plantilla para conservar el formato, pero no funciona.
Como dijo Joseph en los comentarios, puede usar peligrosamente SetInnerHTML para representar una cadena de HTML.
Ejemplo:código-sandbox
export default function App() { const htmlString = "<h1>Hello world</h1>"; return ( <> <div dangerouslySetInnerHTML={{ __html: htmlString }}></div> </> ); }Sin embargo, es importante ser consciente de los riesgos de seguridad, ya que la documentación establece:
dangerouslySetInnerHTMLes el reemplazo de React para usarinnerHTMLen el DOM del navegador. En general, configurar HTML desde el código es arriesgado porque es fácil exponer inadvertidamente a sus usuarios a un ataque de secuencias de comandos entre sitios (XSS). Por lo tanto, puede configurar HTML directamente desde React, pero debe escribirdangerouslySetInnerHTMLSetInnerHTML y pasar un objeto con una clave__htmlpara recordar que es peligroso.
Fuente: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml