为什么组件不显示在反应中？

用户名

我正在尝试leaflet在react中使用..我参考了此模块https://github.com/PaulLeCam/react-leaflet https://www.npmjs.com/package/react-leaflet，但未显示地图为什么？

这是我的代码https://plnkr.co/edit/pTpPxhEFqouMrLTrKUFq?p=preview

//代码在这里

const { Map, TileLayer, Marker, Popup } = ReactLeaflet;
class A extends React.Component{
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }
  render(){
    return (
    const position = [this.state.lat, this.state.lng];
    return (

      <Map center={position} zoom={this.state.zoom}>
      <label>cccc</label>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
      )
  }
}

ReactDOM.render(<A/>,document.getElementById('example'));

马丁·道森（Martin Dawson）

您的中有两个return语句render。

render 应该只返回一次组件。

render(){
    const position = [this.state.lat, this.state.lng];
    return (

      <Map center={position} zoom={this.state.zoom}>
      <label>cccc</label>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
  }

多个项目：

{this.state.items.map(item => (
    <Marker position={[item.lat, item.lng]}>
        <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
        </Popup>
     </Marker

 )}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。