Html-react-parser: Comment gérer les attributs !important dans le style ?

Créé le 18 févr. 2021  ·  8Commentaires  ·  Source: remarkablemark/html-react-parser

J'ai la malheureuse situation où je reçois parfois des balises html d'un cms, qui incluent des styles en ligne avec !important dedans. Je dois les analyser et les rendre dans une application React.

Il n'y a rien que je puisse faire à ce sujet et tous les styles auxquels est attaché !important sont supprimés par React.
Existe-t-il un moyen d'utiliser html-react-parser pour conserver ces styles, afin qu'ils restent dans le corps?
Désolé si ce n'est pas le bon endroit pour poser des questions à ce sujet, n'hésitez pas à clore ce problème dans ce cas.

Merci!

question

Tous les 8 commentaires

@linkurzweg Vous html-react-parser . Voir violon . Soyez simplement conscient de la vulnérabilité XSS si vous utilisez dangereusement SetInnerHTML .

@remarkablemark Ah, je n'ai même pas pensé à dangereusement
Aucun risque réel pour XSS dans mon cas, donc ça devrait aller.

Le problème est que je dois toujours tout exécuter via html-react-parser, car le corps peut contenir des éléments que je dois remplacer par un composant React. Ce n'est que si l'élément a un attribut de style que je peux le rendre tel quel.
Existe-t-il un moyen de reconvertir le domNode en chaîne lors de l'analyse ?

Merci beaucoup!

@linkurzweg Vous pouvez passer votre domNode dans domToReact() et il le rendra en tant qu'élément React. Voir les exemples de remplacement .

@remarkablemark Merci encore ! Je le sais, mais je ne vois pas en quoi cela aiderait dans mon cas ?
J'aurais toujours besoin de ramener le domNode à une chaîne que je pourrais utiliser avec dangereusementSetInnerHTML ou est-ce que je n'obtiens rien?

@linkurzweg Je ne suis pas votre cas d'utilisation. Pouvez-vous fournir un exemple utilisant CodeSandbox , JSFiddle ou Repl.it ?

@remarkablemark voir violon ici : https://jsfiddle.net/9bezs1rt/.
Donc, c'est comme ça: j'obtiens une énorme chaîne avec tout le code HTML, qui doit être analysé d'une manière ou d'une autre (peut contenir des balises de script, des iframes, des intégrations de médias sociaux, etc.). Je dois parcourir tous les nœuds dom et gérer de nombreux cas différents.

Si le nœud dom a des styles en ligne qui lui sont attachés, je peux supposer que je n'ai pas besoin de le remplacer par un composant React et je veux juste le transmettre, y compris les styles qui ont ! important. Et malheureusement ceux-ci se perdent.

@linkurzweg Merci d'avoir créé le violon. Donc, la raison pour laquelle les styles ne sont pas rendus correctement est que les styles en ligne n'ont pas besoin de !important .

Après avoir supprimé !important , j'ai fait apparaître la bordure rouge. Voir le violon mis à jour.

@remarkablemark Bien sûr, idiot moi ! Il peut y avoir d'autres balises de style avec !important à l'intérieur de la chaîne html (tout est très compliqué) qui pourraient entrer en conflit avec les styles en ligne. Mais je peux aussi supprimer le !important, donc ça devrait aller. :D Merci beaucoup pour regarder ceci et votre aide !

Cette page vous a été utile?
0 / 5 - 0 notes