Tengo una lista de componentes que tienen que obtener sus propios datos y generar niños en función de los datos obtenidos. ¿Cómo puedo mostrar un FallbackComponent como elemento secundario del componente superior si todos los componentes secundarios ( ComponentA s) no tienen ningún componente secundario?
Ejemplo:
ContainerComponent FallbackComponent // should only render if there is not a single ComponentB in any ComponentA FallbackComponent2 // Renders if there is no ComponentA // Below should only render if there is atleast one ComponentB ComponentA // fetches own data - to render some ComponentB ComponentB ComponentB ComponentB ComponentA // fetches own data - to render some ComponentB ComponentB ComponentB ComponentA // fetches own data - to render some ComponentB ComponentB ComponentB ComponentB ComponentA // fetches own data - to render some ComponentB ComponentB ComponentB Ya intenté escuchar childNodes en ContainerComponent, que cuenta la cantidad de ComponentB, pero según React Doc, esto no se recomienda y tampoco funciona porque los datos se actualizarán con bastante frecuencia. También traté de pasar el número de cada resultado de ComponentA hasta ContainerComponent para representar el Fallback si los results === 0 , pero en este caso, la longitud de los resultados de un ComponentA sobrescribe la longitud de los resultados de otro.
La forma en que lo veo es que su contenedor debe saber cuándo se han terminado de obtener los datos de un componente A y si ha representado un componente. Cada ComponentA podría tener accesorios "onSuccess" del Componente contenedor que devolverá la cantidad de componentes representados
ContainerComponent
const [components, setComponents] = [{cName: "", nbChildren: 0}] onSuccess = (componentName, nbChildrenRendered) => { newComponentList = new Set([...components, {cName: componentName, nbChildren: nbChildrenRendered}]) setComponents(newComponentList) } <ComponentA onSuccess={onSuccess} />Componente A:
const fetchData = () => { /... Your implementation */ onSuccess("myComponent", data.structureYouLoopOnToRenderYourChildren.length) } Entonces es solo una cuestión de verificar dentro del estado de su component si el nbOfChildren para un componente específico es válido de acuerdo con sus criterios o no.