Reactjs 如何在React动画中跟踪元素位置值？

在

ComponentDidMount（）

中，我正在访问surface元素的

GetBoundingClientRect（）.x

值。当

GetBoundingClientRect（）.x

值达到555时，我想更改曲面的边界。由于曲面正在设置动画，因此该值会随时间变化

class RenderCircle extends React.Component {
      constructor(props) {
        super(props);
        this.state = { show: true };
        this.surfaceRef = createRef()
      }

      componentDidMount() {
       ...
       let surfaceX = this.surfaceRef.current.getBoundingClientRect().x;
       if (surfaceX === 555) {
        this.surfaceRef.current.style.border = "4px solid yellow";
       }
     }

      render() {
       const children = show ? (<div id="surface" ref={this.surfaceRef}/>) : null;
       return (
        <Slide direction="left" transitionEnterDuration={15000}
          transitionExitDuration={15000}>
          {children}
        </Slide>
      );
     }
   }

类RenderCircle扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={show:true}；
this.surfaceRef=createRef（）
}
componentDidMount（）{
...
让SurfaceEx=this.surfaceRef.current.getBoundingClientRect（）.x；
如果（surfaceX==555）{
this.surfaceRef.current.style.border=“4px实心黄色”；
}
}
render（）{
const children=show？（）：空；
返回(
{儿童}
);
}
}

我写的条件不起作用，当我调试它时，逻辑上它是错误的。因此，我想知道，如何或在哪里跟踪

surfaceX

变量的变化，以便执行条件？通常，在动画开始时，surfaceX值为16，但随着动画的进行，该值会增加