反応し、リーフレットLayersControlがリストに

Question

マイバージョンを重複するアイテムを生成： が反応：16.0.0 反応し、リーフレット：1.6.6

私はマップにレイヤコントローラを追加しようとしました。 2つのレイヤーがあり、それぞれに複数のマーカーが含まれています。これは私がやろうとしたことの一例です。

import React, { Component } from 'react' 
import { render } from 'react-dom' 
import { Map, TileLayer, Circle, Marker, Popup, LayersControl, LayerGroup } from 'react-leaflet' 

class SimpleExample extends Component { 
    constructor() { 
    super() 
    this.state = { 
     lat: 51.505, 
     lng: -0.09, 
     zoom: 3, 
     radius: 0 
    }; 
    this.onClick1 = this.onClick1.bind(this); 
    this.onClick2 = this.onClick2.bind(this); 

    } 

    getRandomArbitrary(min, max) { 
    return Math.random() * (max - min) + min; 
    } 

    onClick1(){ 
    this.setState({radius: this.getRandomArbitrary(100, 800)}); 
    } 

    onClick2(){ 
    this.setState({radius: 0}); 
    } 

    renderFirst() { 
    var result = []; 
    for(var i =0; i < 10; i++) { 
    result.push(
     <Marker position={[i,i]}> 
     <Popup> 
      <span>A pretty CSS3 popup. <br/> Easily customizable.</span> 
     </Popup> 
     </Marker> 
    )} 
    return result; 
    } 

    renderSecond() { 
    return <MyLayer latlng={[1, 10]} radius={this.state.radius}/> 
    } 

    render() { 
    return (
     <div> 
     <button name="btn" onClick={this.onClick1}>Click me</button> 
     <button name="btn" onClick={this.onClick2}>Then me</button> 

     <Map center={[0, 0]} zoom={this.state.zoom}> 
     <TileLayer 
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
     /> 
     <LayersControl position='topleft'> 
      <LayersControl.Overlay checked name="first layer"> 
      {this.renderFirst()} 
      </LayersControl.Overlay> 
      <LayersControl.Overlay checked name="second layer"> 
      {this.renderSecond()} 
      </LayersControl.Overlay> 
     </LayersControl> 


     </Map> 
     </div> 
    ); 
    } 
} 


class MyLayer extends Component { 
    constructor(props) { 
    super(props); 
    } 


    render() { 
    if (this.props.radius === 0) { 
     return <LayerGroup/>; 
    } 
    return (<LayerGroup> 
       <Circle center={this.props.latlng} fillColor="red" radius={this.props.radius}/> 
      </LayerGroup>); 
    } 

} 


render(<SimpleExample />, document.getElementById('container')) 

は、ここでコードを実行します。 https://www.webpackbin.com/bins/-Kvmu5PPSjeS4lY-qe_E

問題は、レンダリングした後、リスト中のちょうど2つの層があるはずです。現在、各レイヤーの各アイテムがリストに表示されています。なぜなら、マーカーを配列にプッシュして返しているからです。しかし、レイヤごとに1つのリストを表示するための回避策は何か分かりません。

Answer 1

それは私が画層グループ内のマーカーの私の配列をラップする必要があり、今では動作することが判明しました。

<LayersControl position='topleft'> 
    <LayersControl.Overlay checked name="first layer"> 
    <LayerGroup> 
     {this.renderFirst()} 
    </LayerGroup> 
</LayersControl.Overlay> 
    <LayersControl.Overlay checked name="second layer"> 
    {this.renderSecond()} 
    </LayersControl.Overlay> 
</LayersControl>