React-leaflet如何实现鼠标事件修改Marker透明度并解决useRef报错

问题原因 #

1. 直接修改event.target.options.opacity不生效：Leaflet中仅修改实例的options配置不会触发视图重绘，配置项仅在实例初始化时生效，后续修改需要调用实例提供的官方方法才能更新视图。
2. useRef调用报错：React Hooks必须在函数组件/自定义Hook的顶层作用域调用，不能放在循环、map回调、条件分支中，在遍历渲染的回调里调用useRef完全违反Hooks调用规则，且这个场景下根本不需要为每个Marker单独创建ref。

无状态实现方案 #

不需要为每个Marker维护独立state，也不需要绑定ref，直接在事件回调里调用Marker实例自带的setOpacity方法即可实时修改透明度，鼠标移出时恢复初始值：

<Marker 
  position={/* 标记点坐标 */} 
  icon={/* 自定义图标 */} 
  opacity={0.7}
  eventHandlers={{
    mouseover: (event) => {
      // 直接调用实例方法更新透明度，无需触发React重渲染
      event.target.setOpacity(1);
    },
    mouseout: (event) => {
      // 鼠标移出后恢复初始透明度
      event.target.setOpacity(0.7);
    }
  }}
>
  {/* 此处放Popup、Tooltip内容 */}
</Marker>

列表渲染正确写法 #

遍历渲染Marker时去掉回调里的useRef调用，直接用节点数据本身的唯一标识作为key即可：

return (
  <MapContainer>
    {Object.values(nodes).map((node) => (
      <Marker 
        position={node.getPosition()}
        key={node.id}
        opacity={0.7}
        eventHandlers={{
          mouseover: (e) => e.target.setOpacity(1),
          mouseout: (e) => e.target.setOpacity(0.7)
        }}
      >
        {/* Popup、Tooltip内容 */}
      </Marker>
    ))}
  </MapContainer>
)

补充说明 #

• 所有Leaflet内置的Marker、Polygon等图层实例，修改样式/属性优先调用实例自带的setXxx方法，这类方法会直接更新地图视图，不需要走React的状态更新流程，性能更好，也不会增加额外的状态维护成本。
• 不要在循环、回调、条件判断里调用任何React Hook（包括useState、useRef、useEffect等），否则会破坏Hooks的调用顺序，导致不可预期的bug。

内容的提问来源于stack exchange，提问作者kristyna