鼠标光标动态变化时如何停止反应重选器

Question

我有一个React组件，我需要根据鼠标光标的位置更改光标类型。

鼠标光标是在div的样式上动态设置的。

<div style={{cursor:cursor}}>

类型存储在

const [cursor,SetCursor]=useState('default');

我正在用onHover事件更改光标类型。当触发onHover事件时，将检查鼠标屏幕位置，如果鼠标位于特定区域，则运行

SetCursor('crosshair')

它按预期工作，只不过每次更改光标类型时，屏幕更改器都会正常工作。当光标类型更改时，如何防止屏幕呈现？

补充解释：

我动态地更改游标，因为我没有要目标的DIV。在chart.js图表上有一个方框注释。我使用鼠标屏幕定位，当指针在里面和指针在盒子外面的时候目标。我使用chartJS中的事件来更改游标类型。我的问题是如何动态地更改游标类型，而不需要在反作用中重新复制。

Answer 1

通过在注解盒上绘制3个垂直间距的透明div，得到了一个解决方案，具有绝对定位。三个div中的每一个都有一个“e-resize”、“move”、“w-resize”的游标类型。

谢谢你建议使用CSS。这种方法似乎比我的第一次尝试更优雅。现在，当我浏览注释框时，游标类型会发生变化，而不需要重新添加。

Answer 2

正如David在评论中所说的，为什么不使用css呢？

.my-class:hover {
   cursor: pointer
}

如果您想动态地将css应用于某些类，您可以使用像梅氏sx道具这样的系统，这样可以在Javascript中应用样式如下：

<Box // wrapper around div
  sx={{
    "&:hover": {cursor: "pointer"}
  }} 
>
{...}
</Box>

虽然如果您现在这样做，为什么呈现会导致问题呢？更新状态和重命名通常是尖峰和相当常见的反应。

Answer 3

当您在react应用程序中设置状态时，它将被重新呈现，您无法阻止这一点。