Реакция-листовка создание пользовательских компонентов - PullRequest
Новая
       7

Реакция-листовка создание пользовательских компонентов

0 голосов
/ 25 августа 2018

Я хотел бы создать пользовательский компонент с реагирующим листком, который показывает фактическое положение (x, y) мыши, но я не знаю, как его создать. Я нашел react-leaflet-control, но кажется, что он не обновлен, конечно, я прочитал документацию API https://react -leaflet.js.org / docs / en / custom-components.html , но я не понял этого: /

Может ли кто-нибудь дать мне пример пользовательского компонента, пожалуйста, назовите компонент, который отображает "Hello world" , что было бы более чем достаточно.

1 Ответ

0 голосов
/ 29 августа 2018

Согласно документации , для создания пользовательского компонента необходимы следующие шаги:

1) расширить один из абстрактных классов, предоставляемых React-Leaflet, например: 

class MapInfo extends MapControl {
   //...
}

2) реализовать метод createLeafletElement (props: Object): Object для создания соответствующего экземпляра элемента Leaflet, например: 

createLeafletElement(opts) {
    const MapInfo = L.Control.extend({
      onAdd: (map) => {
        this.panelDiv = L.DomUtil.create('div', 'info');
        return this.panelDiv;
      }
    });
    return new MapInfo({ position: 'bottomleft' });
}

3) обернуть ваш пользовательский компонент, используя withLeaflet() HOC, например: 

export default withLeaflet(MapInfo);

В следующем примере показано, как создать пользовательский компонент для отображения фактического положения (lat,lng) мыши на карте:

Демо

...