Tengo una condición (isOnFullDomain()) que devuelve true , si estoy en esta condición, el componente no se puede cargar.
Este es el código que estoy usando:
import Component from 'components/Component'; useEffect(() => { Component(); if (isOnFullDomain()) { console.log('remove Component'); } }, [path]);Realmente necesito eliminar el componente una vez que está cargado, si lo cargo una vez, aparece en la pantalla.
Necesito algo similar a:
if (isOnFullDomain()) { Component().remove; }¿Alguna idea de cómo puedo solucionarlo?
Debería poder lograrlo usando JSX, en lugar de ganchos de reacción; por lo general, los ganchos se mueven hacia la administración de datos, reaccionan a algunas actualizaciones de valor y hacen algo al respecto.
En este caso, imagino que tiene un método de render que usa su Component . Por lo tanto, algo como esto haría que el Component no apareciera en la página.
import Component from 'components/Component'; // ... const shouldRenderComponent = !isOnFullDomain(); return ( {shouldRenderComponent && <Component /> ); Nota al margen: si no desea cargar el código del Component internamente, es posible que desee echar un vistazo a la declaración de importación y la división del paquete para "cargar de forma diferida" ese componente.
En el componente en el que está renderizando este componente, podría renderizarlo condicionalmente haciendo algo como esto.
return(... {!isOnFullDomain() && <ComponentToBeRendered/>} ... )