javascript - react-leaflet LayersControl 在列表中生成重复项

Question

我的版本: react :16.0.0 react 传单:1.6.6

我试图将图层 Controller 添加到我的 map 中。有两层，每层包含多个标记。这是我尝试做的一个例子。

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

问题是在渲染之后，列表中应该只有两层。目前，我看到每个层中的每个项目都显示在列表中。我认为原因是因为我将标记推送到数组并将其返回。但是，我不确定我可以采取什么解决方法来每层只显示一个列表。

Answer 1

事实证明，我需要将我的标记数组包装在 LayerGroup 中，现在它可以工作了。

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