有条件地在特定位置渲染反应组件

Question

我正在尝试在特定坐标位置有条件地呈现 Qbox 组件。该位置应由父组件的 onmousemove 回调确定，此时 Keepmounted 道具“mounted”设置为 true。当用户将鼠标移动到特定区域时，父组件中的“mounted”设置为 true，我将这个区域称为“mounted”设置区域。我试图将鼠标的初始位置存储在 Qbox 的“已安装”设置区域内作为初始状态，但它不起作用。它有条件地显示，但不是在我想要的位置。相反，它看起来像是在我的鼠标进入视图框的第一个地方渲染..

function Keepmounted(props) {
  return (
      <div style={{ display: props.mounted ? null : 'none' }}>
        <Qbox pos={props.pos} label="rabbit" answers={["yes","no"]} correct="yes" question="Is it a rabbit?"/>
      </div>)
}

function Qbox(props) { 
  const [pos,setPos]=useState({x:props.pos.x,y:props.pos.y});
  return (
    <div style={{position:'absolute', top:pos.y, left:pos.x}} className="question-label">
      <p>{props.question}</p>
      {props.answers.map(ans => (<Qbutton answer={ans} correct={props.correct}/>))}
    </div>  
  )  
}