Как написать компонент, который выводит маркеры реактивной листовки?

Question

Как пользовательский компонент реагирования, который выводит маркер на карту, должен быть записан? Мне нужно иметь что-л нравится эта работа:

import MyMarker from './MyMarker.js'; 

const builtMarker = (function() { 
    const position = [51.520, -0.11]; 
    return (
    <MyMarker position={position}/> 
); 
})(); 

render(
    <div> 
    <h1>Hello, world!</h1> 
    <div className="map"> 
     <Map center={center} zoom={13}> 
      <TileLayer 
      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
      /> 
      {builtMarker} 
     </Map> 
    </div> 
    </div> 
    , 
    document.getElementById('example') 
); 

Я сделал MyMarker компонент, как этот https://github.com/varya/react-leaftlet-test/blob/master/src/MyMarker.js но получает сообщение об ошибке:

Uncaught TypeError: Cannot read property 'addLayer' of undefined 

Я предполагаю, что компонент должен не только расширить MapLayer, но и обеспечить специальный интерфейс. Чего не хватает? Я не мог найти аналогичный пример в документах.

Также, что я должен сделать, чтобы вывести несколько маркеров? Я имею в виду, что в React он должен находиться в одной оболочке. Но для карты это не может быть <div>. Как эта оболочка должна быть написана?

PS: Это репо, где я показываю мой случай https://github.com/varya/react-leaftlet-test

Answer 1

У меня был точно такой же проблема и, читая документацию, я узнал, что мне нужно, чтобы добавить ref='map' компоненту карты, а затем передать это вниз с опорой map={this.props.map} к компонентам детей, связывая их с фактической буклетной картой, поскольку вы будете использовать листовки.

Что происходит внутри, что он пытается в map.addLayer(this) или что-то подобное, находя карту, как неопределенную

Answer 2

Для текущей версии react-leaflet, "React-Leaflet uses React's context API to make Leaflet elements available to other element that need it.". Таким образом, ошибка Uncaught TypeError: Cannot read property 'addLayer' of undefined указывает, что layerContainer не найден (по умолчанию карта листовка).

Вы можете исправить ошибку, отправив контекст доступ к экземпляру компонента react-leaflet

<MyMarker position={position} layerContainer={layerContainer} />