なぜコンポーネントが反応中に表示されないのですか？

Question

私は..私は、このモジュール https://github.com/PaulLeCam/react-leaflet https://www.npmjs.com/package/react-leaflet の参照を取る反応で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に2つのreturn文を持って行く私のコードです。

renderは、コンポーネントを1回だけ返す必要があります。

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 

)}