Html-react-parser: ¿Cómo lidiar con los atributos importantes en el estilo?

@linkurzweg Es posible que no necesite html-react-parser . Ver violín . Solo tenga en cuenta la vulnerabilidad XSS si usa dangerouslySetInnerHTML .

@remarkablemark ¡ Ah, ni siquiera pensé en dangerouslySetInnerHTML!
No hay riesgo real para XSS en mi caso, por lo que debería estar bien.

El problema es que todavía necesito ejecutar todo a través de html-react-parser, porque el cuerpo puede contener elementos que necesito reemplazar con algún componente de React. Solo si el elemento tiene un atributo de estilo, puedo representarlo como está.
¿Hay alguna forma de convertir el domNode de nuevo en una cadena al analizar?

¡Muchas gracias!

@linkurzweg Puedes pasar tu domNode en domToReact() y lo renderizará como un elemento React. Consulte los ejemplos de reemplazo .

@remarkablemark ¡ Gracias de nuevo! Lo sé, pero no veo cómo eso ayudaría en mi caso.
Todavía necesitaría recuperar el domNode a una cadena que podría usar con dangerouslySetInnerHTML o no estoy obteniendo algo?

@linkurzweg No sigo su caso de uso. ¿Puede proporcionar un ejemplo utilizando CodeSandbox , JSFiddle o Repl.it ?

@remarkablemark ver violín aquí: https://jsfiddle.net/9bezs1rt/.
Entonces, es así: obtengo una cadena enorme con todo el html, que debe analizarse de alguna manera (puede contener etiquetas de script, iframes, incrustaciones de redes sociales, etc.). Necesito recorrer todos los nodos dom y manejar muchos casos diferentes.

Si el nodo dom tiene algunos estilos en línea adjuntos, puedo asumir que no necesito reemplazarlo con algún componente de React y solo quiero pasarlo, incluidos los estilos que tienen! Important. Y desafortunadamente esos se pierden.

@linkurzweg Gracias por crear el violín. Entonces, la razón por la que los estilos no se representan correctamente es porque los estilos en línea no necesitan !important .

Después de eliminar !important , hice que se mostrara el borde rojo. Ver violín actualizado.

@remarkablemark ¡ Por supuesto, tonta de mí! Puede haber algunas otras etiquetas de estilo con! Important dentro de la cadena html (todo es muy desordenado) que pueden chocar con los estilos en línea. Pero también puedo eliminar el! Important de allí, por lo que debería estar bien. : D ¡Muchas gracias por mirar esto y su ayuda!