De api obtengo este HTML:

 <div class="my-class" data-src="/event/66478667"></div> <script>(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>

Ahora estoy analizando este HTML a través del paquete react-html-parser como:

 import parser, { Transform } from 'react-html-parser'; const transform: Transform = (node: { type: string; children: { data: string }[] }) => { if (node.type === 'script' && node.children?.length) { // eslint-disable-next-line no-new-func Function(node.children[0].data)(); } }; const options = { transform, }; return ( <div> {parser(html, options)} </div> );

El HTML contiene un <script> con una función. Pero esta etiqueta <script> no se ejecuta en React jsx, después de analizarse y renderizarse. La única forma de hacer que el widget funcione es cuando uso el constructor de funciones de JavaScript (con un IIFE).

De Eslint obtengo: The Function constructor is eval.eslintno-new-func .

¿Existe tal vez una forma mejor/más segura de ejecutar esta función en mi aplicación React, en lugar de usar el constructor de funciones de JavaScript?