Я пытаюсь получить ширину элемента перед рендерингом. Мне это нужно, потому что я буду располагать элемент на основе его текущей ширины. Элемент содержит динамический текст, поэтому он не имеет постоянной ширины.

Чтобы дать вам более убедительный пример, я хочу разместить динамический текст в центре этих элементов:

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; ); }); 

Я пытаюсь найти способ рассчитать ширину элемента, прежде чем он достигнет DOM

Ты не можешь

Из-за стилей, которые могут быть добавлены к вашему элементу, вы не можете рассчитать ширину, прежде чем добавить ее в DOM.

Но есть некоторые решения, которые вы можете попробовать.

Вы должны использовать useLayoutEffect .

Подпись идентична useEffect, но она запускается синхронно после всех мутаций DOM. Используйте это для чтения макета из DOM и синхронного повторного рендеринга. Обновления, запланированные внутри useLayoutEffect, будут сбрасываться синхронно до того, как браузер сможет рисовать.

Это означает, что вы можете вычислить ширину до того, как браузер закрасит элемент в DOM.