entonces mi código se ve como
useEffect(() => { const element = document.getElementById('player'); document.getElementById('fullscreen').addEventListener('click', () => { if (screenfull.isEnabled) { screenfull.request(element); } }); document.getElementById('fullscreen-out').addEventListener('click', () => { if (screenfull.isEnabled) { screenfull.toggle(element); } }); return () => { document.getElementById('fullscreen').removeEventListener('click', () => { if (screenfull.isEnabled) { screenfull.request(element); } }); document.getElementById('fullscreen-out').removeEventListener('click', () => { if (screenfull.isEnabled) { screenfull.toggle(element); } }); } }, [])La plataforma de contenido que estoy construyendo tiene un estado maestro que los administradores pueden cambiar en cualquier momento, algunos componentes (como en el código de ejemplo) no se mostrarán ni representarán en un estado determinado.
Ahora el problema radica en el desapego de un detector de eventos. Cuando el estado cambia, el componente se extrae del DOM y el detector de eventos no se puede eliminar (según tengo entendido).
Entonces esto causa el siguiente error TypeError: Cannot read properties of null (reading 'removeEventListener')
¿Cómo puedo separar el oyente cuando sale el componente?
Cualquier ayuda se agradece, gracias por adelantado.
Como señaló Dai en su comentario, debería haber dejado que React hiciera el trabajo y usar los controladores de eventos que proporciona el marco.
onClick es un controlador de eventos por sí mismo y hace exactamente lo mismo que el código que proporcioné en mi primer ejemplo.
Gracias Dai.
function requestScreenfull() { const element = document.getElementById('player'); if (screenfull.isEnabled) { screenfull.request(element); } } function toggleScreenfull() { const element = document.getElementById('player'); if (screenfull.isEnabled) { screenfull.toggle(element); } } <button onClick={requestScreenfull}>Fullscreen</button> <button onClick={toggleScreenfull}>Toggle</button>Más información sobre la documentación de React