javascript - 反応リーフレットのマーカーを出力するコンポーネントの書き方は？

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')
);

https://github.com/varya/react-leaftlet-test/blob/master/src/MyMarker.jsMyMarkerのようなコンポーネントを作成しましたが、これはエラーになります:

Uncaught TypeError: Cannot read property 'addLayer' of undefined

MapLayerコンポーネントは拡張するだけでなく、特別なインターフェイスを提供する必要があると思います。何が欠けている？ドキュメントで同様の例を見つけることができませんでした。

また、複数のマーカーを出力するにはどうすればよいですか? つまり、React では単一のラッパーである必要があります。<div>しかし、それは地図のためだけではありません。このラッパーはどのように書かれるべきですか?

PS: これは私のケースを実演するレポですhttps://github.com/varya/react-leaftlet-test