Estoy construyendo un portafolio para mostrar el trabajo que he creado. Incluye algunos proyectos pequeños de FreeCodeCamp que se crean de acuerdo con las especificaciones de prueba. Me gustaría incluir las pruebas para que alguien que mire el código pueda ver las pruebas.
Cuando incrusta el script cdn en su archivo index.html en una aplicación de reacción alojada en cualquier lugar, funcionan bien (aunque React no quiere que fuerzas externas manipulen el DOM). Esto instalará un menú de hamburguesas que se puede expandir y puede elegir qué pruebas le gustaría ejecutar. Tenga en cuenta que esta hamburguesa siempre se muestra.
Sin embargo, no quiero tener siempre este menú de hamburguesas porque parte de lo que quiero mostrar es el estilo de la página. Estoy tratando de esperar e insertar la etiqueta del script hasta que se presione un botón.
Puedo mostrar y eliminar con éxito el menú de hamburguesas si presiono los botones Agregar y luego eliminar en orden, pero sé que lo estoy haciendo mal cuando se trata del diseño de React. Esto es obvio por el hecho de que si presiona el botón Agregar a dom 2 veces seguidas, no se eliminará. Además, puedo ejecutar el conjunto de pruebas la primera vez. Pero si quita la hamburguesa y la vuelve a agregar e intenta ejecutar las pruebas, hay errores en la consola.
Mi pregunta es: ¿cómo puede agregar/eliminar correctamente un elemento de secuencia de comandos cdn (que agregará automáticamente un elemento dom (hamburguesa), en un diseño "Reaccionar" adecuado? Estoy pensando que la solución radica en useEffect, useRef o useState, pero Soy "verde" en React y cuando investigo todavía no puedo diseñar una solución que funcione.
Puse el código en una caja de arena. Para recrear el problema, simplemente haga clic en el botón Mostrar la hamburguesa, luego oculte el botón de la hamburguesa, luego vuelva a mostrarlo e intente ejecutar las pruebas. O haga clic en mostrar varias veces seguidas.
Cualquier consejo sobre cómo solucionar esto sería apreciado. Este problema supera mi poca experiencia.
Así que me di cuenta de esto yo mismo. En React, hacer que un elemento cargado en el DOM a través de un CDN externo aparezca y desaparezca de manera segura fue tan simple como CSS.
Acabo de agregar el elemento al DOM con la etiqueta de secuencia de comandos CDN. Entonces podría cambiar display:none o visibility: hidden .
El truco fue cargar primero el script de CDN y luego ocultarlo.
Me encontré con un problema porque estaba probando el enfoque defectuoso de agregar la etiqueta de secuencia de comandos de CDN, eliminarla y agregarla nuevamente.