リーフレットのポップアップが開かない（React）

Question

リーフレット（react-leaflet）を使用している反応アプリケーションのマップビューで作業しています。私はマップ上にマーカーをプロットすることができますが、私がそれらにバインドしたポップアップは、クリックされたときには開きません。私はまず<Marker>と<Popup>のコンポーネントを使ってみましたが、this Githubの問題は、地図コンポーネントからリーフレットマップオブジェクトをつかんで、それにマーカーを明示的にバインドするほうが良いかもしれないと示唆しました。

が

componentDidUpdate() { 
    this.map = this.refs.map.leafletElement; 
    this.state.rows.map((row) => { 
     var marker = L.marker([row.coordinate.latitude, row.coordinate.longitude]); 
     marker.addTo(this.map); 

     var popupText = util.format('<b>%s</b>', row.venue) 
     for(var i = 0; i < row.beers.length; i++){ 
      var beer = row.beers[i]; 
      popupText += util.format('<br>%s: %s - %d', beer.brewery, beer.name, beer.rating) 
     } 

     marker.bindPopup(popupText); 
     //marker.on('click', function(e){console.log('clicked!')}) 
    }); 
} 

render(){ 
    const cover = {position: 'absolute', left: 0, right: 0, top: 50, bottom: 0}; 
    return(
     <div> 
      <Map scrollWheelZoom={false} center={this.state.position} zoom={14} style={cover} ref="map"> 
       <TileLayer 
        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
       /> 
      </Map> 
     </div> 
    ); 
} 

私はmarker.on('click'...)行のコメントを解除しても、console.logは火に思えることはありません：これは私が持っているものです。誰でも何が起こっているのかについてのアイデアはありますか？

Answer 1

issueはOctober 7, 2015の時点では古くなっています。アクションリスナーで子を追加することが修正されました。次に、ポップアップでズームアクションを追加する方法の例を示します。

<Marker position={position}> 
    <Popup> 
     <span> 
     <button onClick={this.zoomOut}> 
      Zoom out 
     </button > 
     <button onClick = {this.zoomIn}> 
      Zoom in 
     </button> 
     </span> 
    </Popup > 
    </Marker> 

このjsfiddleは、実例である。