0
105
ViewsEl paquete de analizador html en React (react-html-parser) está eliminando la etiqueta <script>
En mi aplicación React estoy usando react-html-parser .
Y usarlo como:
import ReactHtmlParser from 'react-html-parser'; <div> {ReactHtmlParser(html)} </div> Desde el backend obtengo algo de html :
Pero si compruebo el dom , todo se representa, excepto la etiqueta <script> .
Probé la sugerencia de este hilo :
import ReactHtmlParser, { Options } from 'react-html-parser'; const options = { replace: (domNode: { type: string; attribs: { src: string } }) => { if (domNode.type === 'script') { const script = document.createElement('script'); script.src = domNode.attribs.src; document.head.appendChild(script); } }, }; return ( <div> {ReactHtmlParser(html, options as Options)} </div> );¿Pero todavía no está inyectando el script?
Actualizar Intentando la respuesta de @Nemanja. Debido a Typescript tuve que cambiarlo un poco:
const transform: Transform = (node, index) => { if (node.type === 'script' && node.children?.length) { console.log('Node', node); return <script key={index}>{node.children[0].data}</script>; } return null; }; const options = { transform, };¿Pero ahora ya no representa el HTML real?
·
Juan Pablo Isaza
1 answers
Answer question0
Para cargar una secuencia de comandos, deberá crear y agregar mediante programación un elemento de secuencia de comandos utilizando el método de transfom de la biblioteca react-html-parser . El siguiente código debería funcionar como se esperaba.
import React, { DOMElement } from 'react'; import ReactHtmlParser, { Options } from "react-html-parser"; const html = "<div class='css-class' data-src='/event/66478667'></div> <script src='something'>(function(d, s, id) {var js,ijs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src='https://embed.widget.js';ijs.parentNode.insertBefore(js, ijs);}(document, 'script', 'my-js'));</script>"; const options = { transform : function transform(node :any, index:any) { if ( node.type === 'script') { return <script key={index} src={node?.attribs?.src}>{node?.children[0]?.data}</script>; } } }; export default function App() { return ( <div> {ReactHtmlParser(html, options as Options)} </div> ); }Aquí está la salida del siguiente código:
·
Juan Pablo Isaza
Report
Answer question