Чтение значений getBoundingClientRect из обратного вызова ref в React

Question

Я пытаюсь извлечь некоторые данные getBoundingClientRect() из серии div с.Есть довольно много движущихся частей из-за того, как они анимированы.Моя проблема в том, что refCallback по существу возвращает серию пустых DOMRect объектов.Вы можете просмотреть полные коды и коробки на досуге: https://codesandbox.io/s/lykqzy41j7.Не обращайте внимания на всю избыточную логику и т. Д. - поля предназначены для отображения цифр по мере их ввода.Это отключено в этой песочнице.

class Numbers extends Component {
  refCallback = el => {
    console.log(el.getBoundingClientRect);
  };

  render() {
    return this.props.num.map((curr, idx) => (
      <Grid item xs={2}>
        <Child initialPose="closed">
          <div ref={this.refCallback}>
            <Paper className="child" square elevation={10} variant="display1">
              {this.props.num2[idx] ? (

                <CSSTransition in timeout={300} transitionName="digit">
                  <Typography variant="display1">{num2[idx]}</Typography>
                </CSSTransition>
              ) : 
              null}
            </Paper>
          </div>
        </Child>
      </Grid>
    ));
  }
}

Answer 1

Я не вижу, как вы вызываете метод getBoundingClientRect. Также проверка значения top, left для boundingRect возвращает правильное значение после вызова метода

class Numbers extends Component {
  refCallback = el => {
    console.log(el.getBoundingClientRect());
  };

  render() {
    return this.props.num.map((curr, idx) => (
      <Grid item xs={2}>
        <Child initialPose="closed">
          <div ref={this.refCallback}>
            <Paper className="child" square elevation={10} variant="display1">
              {this.props.num2[idx] ? (

                <CSSTransition in timeout={300} transitionName="digit">
                  <Typography variant="display1">{num2[idx]}</Typography>
                </CSSTransition>
              ) : 
              null}
            </Paper>
          </div>
        </Child>
      </Grid>
    ));
  }
}

Working demo