Получение всплывающего окна, связанного с ломаной линией, чтобы появиться onMouseover в реактивном листочке

Question

Я пытаюсь получить всплывающее окно с ломаной линией, которое открывается при наведении мыши.

Я пытался принудительно установить реквизиты позиции атрибута popup статическими значениями, но, похоже, это ни на что не влияет. Я не уверен, возможно ли установить это значение, когда оно связано с другим элементом. Кажется, работает, если всплывающее окно не зависит Код ручка здесь

Я знаю, что могу установить функцию для выполнения при наведении курсора, как показано в этом коде.

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

Но я не уверен, как создать событие, которое взаимодействует с этим дочерним компонентом.

Использование листовка 1.4.0 реактивная листовка 2.2.1 реагировать 16.8.5 Реакт-Дом 16,8.5

Answer 1

Чтобы всплывающее окно отображалось при наведении курсора на ломаную линию, вам нужно просто позвонить

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

При желании добавить onMouseOut={e => e.target.closePopup()}, чтобы закрыть всплывающее окно после наведения

Demo