Почему компонент не отображается в реакции?

Question

Я пытаюсь использовать leaflet в реагировать ..Я взять ссылку на этот модуль 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')); 

Answer 1

У вас есть два заявления, возвращаемые в вашем 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 

)}