Question

我使用onMouseMove事件来跟踪我的鼠标坐标。当我将这些坐标作为道具发送到我的子组件并使用它们时，道具已经在我的实际鼠标坐标上了，但是当我尝试在主要组件中使用它们时，它们就是我的实际鼠标坐标。我可能对componentDidUpdate方法犯了一个错误。有人知道我的错误是什么吗？

主要组件

Object

子组件

class Page extends React.Component {
  state = {
    XCoord: 0,
    YCoord: 0
  };
  handleMouseMove = e => {
    const XCoord = e.pageX;
    const YCoord = e.pageY;
    this.setState((state, props) => {
      return { XCoord, YCoord };
    });
  };

  render() {
    const follower = this.refs.follower;
    return (
      <ThemeProvider theme={style}>
        <div onMouseMove={e => this.handleMouseMove(e)} id="test">
          <Head title="" />
          <CreateGlobalStyle />
          {this.props.children}
          <Pointer coords={this.state} />
        </div>
      </ThemeProvider>
    );
  }
}

Answer 1

欢迎堆栈溢出！

通过快速查看代码，您似乎在prevProps方法中使用了componentDidUpdate，这就是为什么子组件中的鼠标坐标似乎滞后的原因。您可能想在this.props方法中使用prevProps而不是componentDidUpdate，如下所示：

警告：未经测试的代码！

componentDidUpdate() {
  this.positionElement(this.props.coords.XCoord, this.props.coords.YCoord);
}

Answer 2

有很多方法可以完成此操作，但是最基本的方法不需要使用refs或componentDidUpdate。只需将鼠标位置作为道具向下移动到Pointer组件，就可以实现：

选中此代码框example，不会延迟或延迟呈现鼠标坐标。

Answer 3

欢迎堆栈溢出！

也许将您的类Pointer更改为纯函数并直接使用其props可能会加快速度！

这里有一段代码可以尝试！

function Pointer(props) {
    return (
      <div id="follower" style={{
      left: props.mouse_x,
      top: props.mouse_y
      }}>
        <div id="circle"></div>
      </div>
    );
  }



class Page extends React.Component {
  state = {
    XCoord: 0,
    YCoord: 0
  };
  handleMouseMove = e => {
    const XCoord = e.pageX;
    const YCoord = e.pageY;
    this.setState((state, props) => {
      return { XCoord, YCoord };
    });
  };

  render() {
    return (
      <div>
        <div onMouseMove={e => this.handleMouseMove(e)} id="test">
          {this.props.children}
          <Pointer 
          mouse_x={this.state.XCoord} 
          mouse_y={this.state.YCoord} />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Page />, document.querySelector('#root'))

#test {
  width:100vh;
  height:100vh;
  border: 2px solid gray;
}

#circle {
   background-color: red;
   width: 10px;
   height: 10px;
   border-radius: 10px;
}

#follower {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.development.js"></script>

<div id="root"></div>

componentDidUpdate的支撑速度不够快。如何解决？

3 个答案: