Question

我正在尝试在响应中实现游标跟踪，以便当游标进入特定组件时，应在游标的右下角显示一条消息。该消息应与光标一起移动。

我正在使用React文档的this页中给出的渲染道具来实现该功能。

我的组件

消息：

class Message extends Component {
    render() {
      const mouse = this.props.mouse;
      return (
        <span style={{ position: 'absolute', left: mouse.x, top: mouse.y }}>Hey I am tracking the cursor!</span>
      );  
    }
  }

  export default Message;

鼠标：

class Mouse extends Component {
    constructor(props) {
      super(props);
      this.handleMouseMove = this.handleMouseMove.bind(this);
      this.state = { x: 0, y: 0 };
    }

    handleMouseMove(event) {
      this.setState({
        x: event.clientX,
        y: event.clientY,
      }); 
    }

    render() {
      return (
        <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
          {this.props.render(this.state)}
        </div>
      );  
    }
  }

  export default Mouse;

表格：<Table />

import Table from 'path/to/table';
import Mouse from 'path/to/mouse';
import Message from 'path/to/message';

<Mouse render={mouse => (
  <Message mouse={mouse} />
)} />
<Table />

在此代码中，仅当光标进入消息组件时才启用跟踪。但是，如果我将代码更改为如下所示，则仅当光标位于包装了Mouse组件的div内时，我才会获得所需的行为，但是消息不会在光标的右下角呈现。

表格：<Table />

import Table from 'path/to/table';
import Mouse from 'path/to/mouse';
import Message from 'path/to/message';

<div style={{ height: '700px', width: '700px'}}>
  <Mouse render={mouse => (
    <Message mouse={mouse} />
  )} />
</div>
<Table />

我正在尝试通过渲染道具使此功能可重用。我的要求是，每当光标进入Table组件（在这种情况下）或任何其他组件（通常）时，都将弹出光标后面的消息。

Answer 1

问题是消息组件的高度在未包装时是窗口的100％，并且在包装时，它继承了父组件的高度，在这种情况下，父组件是div组件

不带包装的代码：

`<Mouse render={mouse => (
  <Message mouse={mouse} />
)} />`

包装后的代码：

`<div style={{ height: "700px", width: "700px"}}>
     <Mouse render={mouse => (
         <Message mouse={mouse} />
      )} />
 </div>`

导致上述行为的

在组件内部反应光标跟踪

1 个答案: