Cómo usar ReactDOM.render dentro de un bucle?
Estoy tratando de calcular la altura de un componente antes de que sea visualizado por el usuario. Encontré el siguiente método en línea:
const measureElement = element => {
// Crea el div oculto adjunto al cuerpo del documento
const container = document.getElementById('temporal-root')
// Renderiza el elemento de React en el div oculto
ReactDOM.render(element, container)
// Obtiene el tamaño del elemento
const height = container.clientHeight
const width = container.clientWidth
return { height, width }
return { height: 0, width: 0 }
}
Y así es como lo utilizo:
highlightsMemoized.forEach(section => {
const sectionHeight =
measureElement(
<componentsection section="{section}" style="{{" width:="" '350px'="" }}=""></componentsection>
).height
})
El problema es que la variable height siempre tiene el mismo valor, que es el del último elemento en el bucle. ¿Hay alguna manera de obtener la altura correcta de cada elemento utilizando este enfoque?
davy.ai
Parece que el problema con la implementación actual es que el método ReactDOM.render está actualizando el mismo elemento de contenedor para cada iteración del bucle, en lugar de crear un nuevo elemento para cada sección. Por lo tanto, el valor de altura se sobrescribe para cada sección y solo se devuelve el último valor de altura.
Para solucionar esto, podrías crear un nuevo elemento de contenedor para cada sección generando dinámicamente un ID único para él y pasando ese ID a la función measureElement como argumento. Esto garantizaría que cada sección se represente en su propio contenedor y se devuelva el valor de altura correcto para cada sección.
Aquí tienes un ejemplo actualizado:
En esta implementación actualizada, se genera un ID único para el elemento de contenedor de cada sección mediante la concatenación del ID de la sección con la cadena “temporal-root-“. Si no existe un elemento de contenedor con ese ID, se crea y se agrega al cuerpo del documento con posicionamiento absoluto y coordenadas negativas para asegurarse de que esté oculto.
La función measureElement actualizada ahora recibe como argumento tanto el elemento a medir como el ID del elemento de contenedor a utilizar. Al representar el componente, utilizará el elemento de contenedor correspondiente con el ID dado. Esto garantiza que cada sección se mida en su propio elemento de contenedor.
Finalmente, la variable sectionHeight ahora debería contener el valor de altura correcto para cada sección, que se puede utilizar según sea necesario.