React-leaflet：更改鼠标事件的标记不透明度

Question

我正在尝试更改 mouseover 事件的标记不透明度。

<Marker position={} icon={} opacity={0.7}
    eventHandlers={{
        mouseover: (event) => {
            // change opacity here?
            // I tried:
            event.target.options.opacity = 1;
        }
    }}
/>

这行不通。我认为唯一的方法是为每个标记保持一个状态，但我不喜欢这个想法。这只是一个简单的任务，我不想为此保留所有状态。

Answer 1

你可以这样试试：

<>
  {markers.map(marker => {

    // reference - no need for array
    const marker = useRef(null);

    return (
      <Marker
        ref={marker}
        key={marker.id}
        position={[marker.lat, marker.lng]}
        eventHandlers={{
          mouseover: () => (marker.current._icon.style['opacity'] = 0.5),
          mouseout: () => (marker.current._icon.style['opacity'] = 1),
        }}
      >
      </Marker>
    );
  })}
</>

它使用ref 来获取 HTML 元素的句柄并直接在其上更改样式。