反應小葉LayersControl產生重複的項目列表

我的版本：陣營：16.0.0 反應小葉：1.6.6反應小葉LayersControl產生重複的項目列表

我試圖層控制器添加到我的地圖。有兩層，每層包含多個標記。這是我試圖做的一個例子。

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

的問題是在渲染之後，應該在列表中只有兩個層。目前，我看到每個圖層中的每個項目都顯示在列表中。我認爲原因是因爲我將標記推送到數組並將其返回。但是，我不確定我可以做什麼的解決方法，只顯示每層一個列表。

來源

2017-10-06 Brian Hsu

原來，我需要我的包在圖層組標記的陣列，現在它的工作原理。

<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>

來源

2017-10-06 21:07:56

反應小葉LayersControl產生重複的項目列表

回答

相關問題