reactjs - react 传单鼠标悬停/悬停弹出窗口

Question

嘿嘿!

我希望通过悬停/鼠标悬停打开弹出窗口。

我尝试了推荐的方法，但它仍然只能在点击时打开。有谁知道缺少什么？

感谢任何帮助!

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import L from 'leaflet';

const Map = () => {
    const renderIcons = () => {
    return(
        <Marker
         position = {[latitude, longitude]}
         icon     = {getIcon(markerType)}
         onMouseOver = {event => event.target.openPopup()}
        >
            <Popup>
             Hello 
            </Popup>
        </Marker>
     );
});
return(
    <MapContainer ...>
       <TileLayer .../>
       {renderIcons()}
    </MapContainer>
 );
}

Answer 1

它可以在没有 useMemo 和 useRef 的情况下完成，但仍然使用 eventHandlers:

<Marker
  position={[latitude, longitude]}
  icon={getIcon(markerType)}
  eventHandlers={{
    mouseover: (event) => event.target.openPopup(),
  }}
>
  <Popup>Hello</Popup>
</Marker>;