Este código actualmente obtiene 'palabras dinámicas' del CMS y las cambia a span, que obtienen un detector de eventos mientras hace clic en ellas, algo sucede. Pero actualmente solo obtiene la última 'palabra dinámica' del CMS, en lugar de todas. Estaba pensando en ponerlo en un bucle, pero no creo que eso funcione.
¿Alguien ve dónde está el problema?
Caja de arena de código:
https://codesandbox.io/s/musing-wozniak-zzwps2?file=/src/App.js
Ok, veo su reproducción de CodeSandbox, debe consultar el elemento DOM en cada bucle en lugar de una vez por encima de la ejecución del bucle.
useEffect(() => { // remove these lines // const el = document.querySelector(".textblock"); // const text = el.innerHTML; dynamic_words.map((word) => { // and replace lines above into the loop const el = document.querySelector(".textblock"); const text = el.innerHTML; // ... }) }) Y para los detectores de eventos, debe editar su condición this.innerHTML.includes(dynamic_word) a this.innerHTML.includes(dynamic_words[i])
Será bueno si proporciona una reproducción mínima que realice su problema (sugiero usar CodeSandbox ), pero supongo que la parte crítica del problema es const el = document.getElementById('textblock'); y la identificación no es única, por lo que después de que su código se ejecute por completo, la funcionalidad funciona en cada ciclo de sus palabras dinámicas, pero están sobrescribiendo su resultado en el único elemento de la identificación es 'textblock' , de modo que solo vea el último resultado solamente.
nit: el código en ArticleBodyText se mantendrá y leerá más fácilmente si se reescribe por completo, tiene un estilo muy mutable en este momento (consulte DOM y mute el innerHTML directamente)