将弹出窗口绑定到折线以出现在react-leaflet中的onMouseover上

Question

我正在尝试在鼠标悬停时打开一个折线弹出窗口。

我尝试用静态值强制popup属性的位置属性，但这似乎没有任何影响。我不确定是否有可能在绑定到另一个元素时设置此值。如果弹出窗口是独立的，https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails&id=-DIJvggBrg8&key=xyz

我知道我可以设置一个在鼠标悬停时执行的功能，如此Code pen here

所示

<Polyline positions={positions}
          onMouseOver={(event) => null}
>

但是我不确定如何创建一个与此子组件交互的事件。

使用 传单1.4.0 react-leaflet 2.2.1 反应16.8.5 react-dom 16.8.5

Answer 1

要使鼠标悬停在折线上后才能显示弹出式窗口，只需调用

<Polyline
    positions={positions}
    /*What should onMouseOver do?*/
    onMouseOver={e => e.target.openPopup()}>

（可选）添加onMouseOut={e => e.target.closePopup()}以将鼠标悬停在弹出窗口上

Demo

Answer 2

我对Polyline事件有很大的疑问。

要修复它，请使用：

import "leaflet/dist/leaflet.css";

请勿使用：

import 'leaflet-css';

从软件包“ leaflet-css”中获取：“ ^ 0.1.0”