Tengo una cadena XML que se muestra en un span en una etiqueta pre :
<pre className="xmlContainer"> <span id="xml-span"></span> </pre>El XML se parece a esto:
<root> <child-to-replace> <child-to-replace/> ... <root/> Con un número múltiple (desconocido) de la etiqueta child-to-replace .
Reemplazo < y > para mostrar el xml que está contenido en una variable xml :
let element = document.getElementById('xml-span'); var displayXml = xml.replaceAll('<','<').replaceAll('>','>'); element.innerHTML = displayXml; También quiero reemplazar todas las instancias de la etiqueta de apertura de child-to-replace con una etiqueta de anclaje que llama a una función updateParentScope . He intentado simplemente reemplazarlo:
function updateParentScope(scope) { //updates scope for parent } useEffect(() => { let element = document.getElementById('xml-new'); var displayXml = xml.replaceAll('<','<').replaceAll('>','>') .replaceAll('child-to-replace', '<a onclick="updateParentScope(\"sometext\")" >child-to-replace</a>') element.innerHTML = displayXml;) element.innerHTML = replaced; }, [xml]) Esto da Uncaught ReferenceError: updateParentScope is not defined cuando se hace clic.
¿Hay alguna manera de resolver esto o reemplazar el texto es un enfoque incorrecto?
La solución que encontré fue cambiar la etiqueta de anclaje a un botón, luego obtener el elemento del DOM después de renderizar con un gancho useEffect. Cuando se recupere el elemento, agregue un detector de eventos.
useEffect(() => { const cond = document.getElementById(btnId) || false; if (cond && !hasEventListener){ var btn = document.getElementById(btnId); btn.addEventListener('click', updateParentScope) setHasEventListener(true); } setHasEventListener(false); }) La cond de condiciones es para asegurarse de que el elemento se represente en el DOM.
Necesitaba agregar hasEventListener al estado para no agregar el detector de eventos varias veces:
const [hasEventListener, setHasEventListener] = useState(false); Esta no es una solución ideal ya que la función llamada por el evento de click no acepta parámetros.