如何編寫輸出反應傳單標記的組件？

應如何編寫在地圖上輸出Marker的自定義反應組件？我需要有水木清華這樣的工作：如何編寫輸出反應傳單標記的組件？

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

來源

2015-11-22 Varvara Stepanova

我有完全相同的問題，看完我發現，我需要一個ref='map'添加到地圖組件，然後通過文件回購它與道具map={this.props.map}一起放置到子組件，將它們鏈接到實際的傳單地圖，就像使用leafletjs一樣。

裏面會發生什麼事是，它試圖以一個map.addLayer(this)或類似的東西，發現地圖爲未定義

來源

2016-02-15 23:46:17

對於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} />

來源

2016-10-06 23:34:43 Mono

如何編寫輸出反應傳單標記的組件？

回答

相關問題