从React中的ref回调读取getBoundingClientRect值

Question

I'm trying to extract some getBoundingClientRect() data from a series of div s. There are quite a few moving parts because of the way they're animated. My problem is that the refCallback essentially returns a series of empty DOMRect objects. You're welcome to peruse the full codesandbox at your leisure: https://codesandbox.io/s/lykqzy41j7 . Disregard all the redux logic etc. - the boxes are meant to display numbers as they're being typed. That's disabled in this sandbox, though.

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

I don't see you calling the getBoundingClientRect method, Also checking top , left value for the boundingRect does return a correct value after invoking the method

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