React.js - 是否可以在第一次渲染之前获取元素的大小？

Question

I'm trying to get an element's width before render. I need it because I will position the element based on it's current width. The element contains a dynamic text so it doesn't have a constant width.

To give you a more solid example, I want to position a dynamic text at the center of these elements:

getLabels = () =>
 this.props.labels.map(labelObj => {
  const labelPosition = this.getValueWidth(labelObj.pos);
  const labelPositionText = `${labelPosition}%`;
  return (
    <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,
      }}
    />
  );
});

Answer 1

I'm trying to find a way to calculate the element's width before it reaches to the DOM

You can't.

Because of the styles that can be added on your element, you can't calculate the width before you add it to the dom.

But there is some solutions you can try.

You should use useLayoutEffect .

The signature is identical to useEffect, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.

These means you can calculate the width before the browser paint the element on the DOM.