Se usa específicamente solo para ver las alturas/anchuras (getBoundingClientRect) de los elementos. Recientemente encontré la necesidad de encontrar todas las alturas separadas de una cantidad dinámica de elementos secundarios para realizar un cálculo. Agregué una referencia dentro del componente secundario y pasé una función desde el elemento principal en un intento de actualizar la lista principal de dimensiones secundarias (que estaba en estado). Encontré que esto es abiertamente complejo, confuso y poco confiable. Entonces, en el padre, simplemente hice un bucle for simple con getElementById después de darle a cada hijo una identificación de child-${index} .
Sé que se supone que NO debes hacer ninguna manipulación DOM directa en React; sin embargo, si su objetivo es leer solo algunos datos, ¿es un problema o una mala práctica?
Puede que no sea un problema en este momento, pero consideraría usar getElementById en lugar de una mala práctica de ref en general (o al menos llamarlo "una solución alternativa").
getElementById funciona "fuera" de React, por lo que no está utilizando React aquí.
Eso podría funcionar por ahora, pero también podría interferir con lo que podría hacer React en algún momento. Por ejemplo, puede acceder o mantener una referencia a un nodo DOM, y React puede decidir eliminar ese nodo mientras lo estaba leyendo. No veo por qué podría suceder esto en su ejemplo, pero cuando se usan dos sistemas separados, es difícil hacer un seguimiento de las posibles consecuencias.
Con el id child-${index} ha introducido una dependencia lógica (acoplamiento) entre el padre y el hijo. El id child-${index} actúa aquí como referencia y debe mantenerse sincronizado manualmente.
Esto podría ser más fácil a corto plazo, pero en realidad es más complejo como un enfoque general (por ejemplo, menos mantenible, reutilizable, ...). Se podría decir que todo el propósito de React es evitar tales complejidades.
Sus componentes deben ser tan independientes entre sí como sea posible y solo deben comunicarse a través de los accesorios.
Sugiero evitar getElementById y pasar un ref , y hacer que los niños sepan su tamaño (por ejemplo, usando un gancho personalizado) y pasar solo los tamaños al padre (no al ref).
Si eso no es posible, preferiría usar refs .
También tenga en cuenta que "confusión" no es lo mismo que "complejidad": la confusión puede disminuir adquiriendo más información, pero la complejidad es una propiedad inherente de un sistema.