Estoy tratando de obtener el ancho de un elemento antes de renderizar. Lo necesito porque posicionaré el elemento en función de su ancho actual. El elemento contiene un texto dinámico, por lo que no tiene un ancho constante.

Para darle un ejemplo más sólido, quiero colocar un texto dinámico en el centro de estos elementos:

getLabels = () ={amp}gt; this.props.labels.map(labelObj ={amp}gt; { const labelPosition = this.getValueWidth(labelObj.pos); const labelPositionText = `${labelPosition}%`; return ( {amp}lt;div style={{ position: 'absolute', backgroundColor: 'grey', zIndex: 2, left: labelPositionText, height: this.props.labelStyle.height, width: this.props.labelStyle.width, marginLeft: (this.props.labelStyle.width / 2) * -1, marginTop: ((this.props.labelStyle.height - this.props.height) / 2) * -1, borderRadius: 100, }} /{amp}gt; ); }); 

Estoy tratando de encontrar una manera de calcular el ancho del elemento antes de que llegue al DOM

No puedes

Debido a los estilos que se pueden agregar a su elemento, no puede calcular el ancho antes de agregarlo al dom.

Pero hay algunas soluciones que puedes probar.

Debe usar useLayoutEffect .

La firma es idéntica a useEffect, pero se dispara sincrónicamente después de todas las mutaciones DOM. Use esto para leer el diseño del DOM y volver a renderizar sincrónicamente. Las actualizaciones programadas dentro de useLayoutEffect se enjuagarán sincrónicamente, antes de que el navegador tenga la oportunidad de pintar.

Esto significa que puede calcular el ancho antes de que el navegador pinte el elemento en el DOM.